//@import '../../../static/config/const.less';
html,body{
  font-family:"Microsoft YaHei", Arial, 'Times New Roman', SimHei !important;
}
//谷歌浏览器滚动条
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track-piece {
  background-color: #CCCCCC;
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: #999999;
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: #CCCCCC;
  -webkit-border-radius: 6px;
}

//背景绝对剧中
.bg_cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
}

.pubCenter {
  position: absolute;
  left: 0;
  top: 0;
  margin: auto auto;
  bottom: 0;
  right: 0;
  max-height: 100%;
  max-width: 100%;
}
body .el-message {
  margin: 38px auto 0;
}

body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, dt, img, form, header, article, footer {
  padding: 0px;
  margin: 0px;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 100;
}

select {
  padding: 0px;
  margin: 0px;
  overflow: scroll;
}

ul, ol li {
  list-style: none;
}

input {
  padding: 0px;
  margin: 0px;
  outline: none;
}

.l {
  float: left;
}

.r {
  float: right;
}

.c {
  clear: both;
}

.m {
  margin: 0 auto;
}

.clear {
  clear: both;
  font-size: 0px;
  height: 0px;
  overflow: hidden;
}

a:link, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

body {
  word-wrap: break-word;
  display: box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: inherit !important;
}

html, body {
  width: 100%;
  height: 100%;
  font-weight: 500;
}
.title_pu{
  font-size: 12px;
  overflow: hidden;
}


//产品框
#bbsEdit {
  width: 100%;
  height: 100%;
  overflow: hidden;
  //拖拽的板式kuang
  #div_drap {
    font-size: 14px;
    color: #333;
    background: #fff;
    position: absolute;
    top: 68px;
    right: -10px;
    width: 200px !important;
    height: 400px !important;
    z-index: 8;
    border: 1px solid #ccc;

    box-shadow: 0 10px 10px -6px #777;
    cursor: move;

    .titleBox {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-bottom: 1px solid #d7d7d7;
    }
    .titleClose {
      > i {
        font-size: 30px;
        color: #ccc;
      }
      &:hover {
        cursor: pointer;

      }
      &:active {
        top: 1px;
        color: #a00912;
      }
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 30px;
    }

    .checkBS_b {
      > ul {
        li {
          line-height: 30px;
          width: 80%;
          margin: 4px 10%;
          .btn_span {
            line-height: 30px;
            display: inline-block;

          }
        }
      }
      width: 100%;
      height: 369px;
      overflow-y: auto;
      background: #fff;
      > .img_div {
        width: 45%;
        float: left;
        position: relative;
        height: 130px;
        margin-left: 5%;
        margin-top: 6px;
        margin-bottom: 6px;
        border: 1px solid #C4C4C4;
        box-sizing: border-box;
        img {
          cursor: default;
          display: block;
          //                        width: 80%;
          .pubCenter;
          max-width: 98%;
        }
      }

      .boder_actiev {
        border: 1px solid #a00912 !important;
      }
    }
  }

}

//书皮样式
.titlePage_bg {
  float: left;
  width: 320px;
  height: 212px;
  background: #fff;
  margin: 0px 8px 10px 8px;

  > div {
    width: 50%;
    float: left;
    height: 100%;
    position: relative;

    span {
      position: absolute;
      line-height: 30px;
      bottom: -30px;
      height: 30px;
      font-size: 14px;
      text-align: center;
      background: #efefef;
      color: #333;
      left: 40%;
    }
  }
}

//台历封面的样式 2017 横竖 2018等

//封面的样式
.bbs_bg_blue { //宝宝书蓝色
  background: url(http://image2.artup.com/static/img/xsg_lsfm.jpg) no-repeat !important;
  background-size: 100% 100% !important;
}

.bbs_bg_blue_fd {
  background: url(http://image2.artup.com/static/img/xsg_lsfd.jpg) !important;
  background-size: 100% 100% !important;
}

.bbs_bg_blue_fm {
  background: #107669 !important;
}

.bbs_bg_red { //宝宝书红色
  background: url(http://image2.artup.com/static/img/xsg_fsfm.jpg) !important;
  background-size: 100% 100% !important;
}

.bbs_bg_red_fd {
  background: url(http://image2.artup.com/static/img/xsg_fsfd.jpg) !important;
  background-size: 100% 100% !important;
}

.bbs_bg_red_fm {
  background: #eb6621 !important;
}

.bbs_bg_orange { //宝宝书橙色
  background: url(http://image2.artup.com/static/img/xsg_csfm.jpg) !important;
  background-size: 100% 100% !important;
}

.bbs_bg_orange_fd {
  background: #c52d6b !important;
}

.bbs_bg_orange_fm {
  background: #eb6621 !important;
}

.bbs_bg_green { //宝宝书绿色
  background: url(http://image2.artup.com/static/img/xsg_lvsfm.jpg) !important;
  background-size: 100% 100% !important;
}

.bbs_bg_green_fd {
  background: url(http://image2.artup.com/static/img/xsg_lvsfd.jpg) !important;
  background-size: 100% 100% !important;
}

.bbs_bg_green_fm {
  background: #283e6f !important;
}

//黑色
.black_bg {
  background: #1d1c19 !important;
}

.black_bg_fm {
  background: #1d1c19 !important;
}

.gray_bg {
  background: #989898 !important;
}

//时光集
//浪漫紫
.shiguangji_lmz_fm {
  background: url(http://m.builder.artup.com/static/img/zi.png) !important;
  background-size: 100% 100% !important;
}

.shiguangji_lmz_fe {
  background: #5b4f83;
}

.shiguangji_lmz_fd {
  background: url(http://m.builder.artup.com/static/img/zi3.png) !important;
  background-size: 100% 100% !important;
}

//    随性绿
.shiguangji_sxl_fm {
  background: url(http://m.builder.artup.com/static/img/lv.png) !important;
  background-size: 100% 100% !important;
}

.shiguangji_sxl_fe {
  background: #1b8275;
}

.shiguangji_sxl_fd {
  background: url(http://m.builder.artup.com/static/img/lv3.png) !important;
  background-size: 100% 100% !important;
}

//欢聚红
.shiguangji_hjh_fm {
  background: url(http://m.builder.artup.com/static/img/red.png) !important;
  background-size: 100% 100% !important;
}

.shiguangji_hjh_fe {
  background: #bb356c;
}

.shiguangji_hjh_fd {
  background: url(http://m.builder.artup.com/static/img/red3.png) !important;
  background-size: 100% 100% !important;
}

//    纯真白
.shiguangji_czb_fm {
  background: url(http://m.builder.artup.com/static/img/hui.png) !important;
  background-size: 100% 100% !important;
}

.shiguangji_czb_fe {
  background: #dbd3cb;
}

.shiguangji_czb_fd {
  background: url(http://m.builder.artup.com/static/img/hui3.png) !important;
  background-size: 100% 100% !important;
}

.firstPage, .lastPage { //首页和尾页书皮的样式
  .page_bg {
    height: 212px;
    width: 100%;
  }
  .footer_page {
    height: 30px;
    background: red;
  }
}

.comtent_chanpin {
  width: 100%;
  background: #efefef;
  .line_comtent {
    border-bottom: 1px solid #D3D3D6;
    .scrollBar {
      overflow-y: auto;
      //          overflow: hidden;
    }
    .comtent {
      width: 1040px;
      //      height: 300px;
      margin: 0 auto;
      //      overflow: auto;
      position: relative;
      .box_menu {
        width: 120px;
        height: 250px;
        //          border: 1px solid red;
        position: absolute;
        right: -130px;
        top: 50px;
        ul {
          > li {
            cursor: pointer;
            height: 35px;
            line-height: 35px;
            margin: 10px;
            font-weight: 400;
            transition: all 0.2s;
            font-size: 14px;
            i {
              padding: 0 4px;
              font-size: 16px;
              &:hover {
                opacity: .8;
                text-indent: 2px;
                color: #a00912;
              }
            }
            &:hover {
              opacity: .8;
              text-indent: 2px;
              color: #a00912;
            }
            &:active {
              position: relative;
              top: 1px;
            }
          }

        }
      }
      .title {
        font-size: 14px;
        color: #333;
        line-height: 54px;
        height: 54px;
        width: 100%;
        overflow: hidden;
        > div {
          width: 50%;
          > span {
            font-size: 14px;
            color: #333;
            font-weight: 500;
            padding-right: 20px;
          }
        }
        .title_left {
          float: left;
          text-indent: 100px;
        }
        .title_right {
          width: 40%;
          float: right;
          text-align: right;
          padding-right: 100px;
        }
      }
      //
      .time_main_left {
        width: 100%;
        overflow: auto;
        margin-top: 30px;
        .time_bg {
          float: left;
          width: 320px;
          height: 242px;
          background: #fff;
          margin: 0px 8px 10px 8px;
          overflow: hidden;
          > div {
            width: 50%;
            float: left;
            height: 100%;
            position: relative;
          }

        }
        > .taili_hengban { //台历横版的情况
          height: auto !important;
          background: #efefef;
          .pubilc_div {
            height: 230px;
            &:nth-of-type(2n+2) .taili_pu {
              float: right;
            }
            &:nth-of-type(2n+2) .taili_pu_2 {
              float: right;
            }
            //台历的样式
            > .taili_pu {
              width: 152px;
              float: left;
              height: 113px;
              > .taili_template {
                width: 100%;
                height: 100%;
                background-color: #fff;
              }
            }
            .taili_pu_2 {
              width: 152px;
              float: left;
              height: 204px;
              > .taili_template {
                width: 100%;
                height: 100%;
                background-color: #fff;
              }
            }
          }
        }
      }
    }
  }

  //模版样式
  .active_line {
    border: 1px solid #a00912 !important;
    overflow: hidden;
  }

  .hengban_bbs {
    width: 100% !important;
    height: 100%;
    > .time_pu {
      width: 100% !important;
      height: 100% !important;
      .pageleft {
        text-align: left !important;
        text-indent: 28px;
      }
      .hengbanText {
        margin-left: 20px !important;
      }
      .bbs_hengban {

        width: 280px;
        height: 160px;
        margin: 18px auto 18px;
        .div_page {
          width: 100%;
          position: relative;
          height: 100%;
          background-color: #d2d2d2;

        }

      }
    }
    //横版画册不同板式样式
    .hcTemplate225_355 {
      .template480_320 {
        width: 280px;
        height: 186.67px;
        margin: 5px auto 5px;
        .div_page {
          width: 100%;
          position: relative;
          height: 100%;
          background-color: #d2d2d2;

        }
      }
    }
    //hcTemplate355_225
    .hcTemplate355_225 {
      .template680_220 {
        width: 280px;
        height: 90.32px;
        margin: 54px auto 52px;
        .div_page {
          width: 100%;
          position: relative;
          height: 100%;
          background-color: #d2d2d2;

        }
      }
    }
    //hcTemplate360_510
    .hcTemplate360_510 {
      .template690_475 {
        width: 270px;
        height: 186.2px;
        margin: 5px auto 5px;
        .div_page {
          width: 100%;
          position: relative;
          height: 100%;
          background-color: #d2d2d2;

        }
      }
    }

  }

  .pubilc_div {

    //          transition: all 1.3s;
    box-sizing: border-box;

    .hcTemplatetext01 {
      .title_pu {
        border: 1px solid #d2d2d2;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
      }
      .mainTitle {
        width: 140px;
        height: 20px;
        margin: 20px auto 10px;
        line-height: 20px;
        font-size: 12px;
        background: #e9e9e9;
        box-shadow: rgb(136, 136, 136) 2px 2px 2px;
      }
      .subtitle {
        width: 140px;
        height: 12px;
        margin: 0px auto 30px;
        line-height: 12px;
        font-size: 12px;
        box-shadow: rgb(136, 136, 136) 2px 2px 2px;
        background: #e9e9e9;
      }
      .box_text {
        width: 140px;
        height: 106px;
        margin: 14px auto;
        font-size: 12px;
        line-height: 13px;
        overflow: hidden;
        .text_left {
          width: 66px;
          float: left;
          height: 106px;
          background: #e9e9e9;
        }
        .text_right {
          width: 66px;
          height: 106px;
          background: #e9e9e9;
          float: right
        }
      }
    }
    .hcTemplatetext02 {

      .title_pu {
        border: 1px solid #d2d2d2;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
      }
      .mainTitle {
        width: 100px;
        height: 20px;
        margin: 20px 0px 10px 50px;
        line-height: 20px;
        font-size: 12px;
        box-shadow: rgb(136, 136, 136) 2px 2px 2px;
        background: #e9e9e9;
      }
      .subtitle {
        width: 100px;
        height: 12px;
        margin: 0px 0px 30px 50px;
        line-height: 12px;
        font-size: 12px;
        box-shadow: rgb(136, 136, 136) 2px 2px 2px;
        background: #e9e9e9;
      }
      .box_text {
        width: 100px;
        height: 106px;
        margin: 14px 0px 14px 50px;
        font-size: 12px;
        line-height: 12px;
        overflow: hidden;
        background: #e9e9e9;
      }
    }
    .hcTemplatetext03 {

      .title_pu {
        border: 1px solid #d2d2d2;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
      }
      .mainTitle {
        width: 140px;
        height: 20px;
        margin: 20px auto 10px;
        line-height: 20px;
        box-shadow: rgb(136, 136, 136) 2px 2px 2px;
        background: #e9e9e9;
      }
      //                    .subtitle{
      //                         width:100px;
      //                         height: 12px;
      //                         margin: 0px 0px 30px 50px;
      //                    }
      .box_text {
        width: 140px;
        height: 40px;
        margin: 30px auto 102px;
        line-height: 13px;
        font-size: 12px;
        overflow: hidden;
        box-shadow: rgb(136, 136, 136) 2px 2px 2px;
        background: #e9e9e9;
      }
    }

    .time_pu {
      position: relative;
      .bbsClass {
        .text_span {
          //position: relative;
          //text-align: center;
          //width: 100%;
          //display: block;
        }
        .text_12 {
          //height: 20px;
          //position: absolute;
          //word-break: break-all;
          //word-wrap: break-word;
          //line-height: 1;
          //transform-origin: left top 0px;
          //font-size: 12px;
          //transform: scale(0.93981);
          //left: 0px;
          //top: 0px;
        }
        overflow: hidden;
        position: relative;
        .drap_img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
        }
        .div_page {
          overflow: hidden;
          position: relative;
          //                         z-index: 9;
          > img {
            z-index: 1;
            position: absolute;
          }
        }
        > img {
          //                          .pubCenter;
          position: absolute;
        }
      }
      .template01 {
        width: 128px;
        height: 128px;
        margin: 42px auto 26px;
        background-color: #d2d2d2;
      }
      .template02 {
        width: 124px;
        height: 165.4px;
        margin: 15.3px auto 15.3px;
        background-color: #d2d2d2;
      }
      .template03 {
        width: 128px;
        height: 180px;
        margin: 8px auto 8px;
        .div_page {
          width: 100%;
          height: 88px;
          background-color: #d2d2d2;

        }
        .div_page:first-child {
          margin-bottom: 4px;
        }
      }
      .template04 {
        width: 128px;
        height: 185.36px;
        margin: 5px auto 5.64px;
        background-color: #d2d2d2;
      }
      .template05 {
        width: 128px;
        height: 88.27px;
        background-color: #d2d2d2;
        margin: 64px auto 44px;
      }
      .template06 {
        width: 128px;
        height: 94px;
        overflow: hidden;
        margin: 53px auto 49px;
        .div_page {
          width: 60px;
          height: 90px;
          float: left;
          background-color: #d2d2d2;
        }
        .div_page:last-of-type {
          float: right;
        }
      }
      .template07 {
        width: 134px;
        height: 132px;
        overflow: hidden;
        margin: 34px auto 30px;
        .div_page {
          width: 64px;
          height: 64px;
          float: left;
          background-color: #d2d2d2;
          margin-bottom: 4px;
        }
        .div_page:nth-child(2n+2) {
          float: right;
        }

      }
      .template08 {
        width: 104px;
        height: 150px;
        overflow: hidden;
        margin: 20px auto 26px;
        .div_page {
          width: 48px;
          height: 72px;
          float: left;
          background-color: #d2d2d2;
          margin-bottom: 4px;
        }
        .div_page:nth-child(2n+2) {
          float: right;
        }
      }
      .text {
        line-height: 12px;
        height: 12px;
        font-size: 12px;
        overflow: hidden;
        border: 1px solid #d2d2d2;
        box-sizing: border-box;
        width: 128px;
        margin: 0 auto;
      }
      .page {
        line-height: 30px;
        height: 30px;
        font-size: 14px;
        text-align: center;
        background: #efefef;
        color: #333;
        margin-top: 4px;
        position: relative;
        > div {
          width: 50%;
          float: left;
          font-size: 13px;
        }
        .pageleft {

        }
        .pageRight {
          cursor: pointer;
        }
        .pageRight:hover {
          opacity: .8;
        }
        .pageRight:active {
          position: relative;
          top: 1px;
        }
      }
    }
    //不同尺寸的板式
    .hcTemplate225_355 {
      .template225_320 {
        width: 128px !important;
        height: 182px !important;
        margin: 7px auto 7px;
        background-color: #d2d2d2;
      }
      .template225_157 {
        width: 128px;
        height: 180px;
        margin: 10px auto 6px;
        .div_page {
          width: 100%;
          height: 80px !important;
          background-color: #d2d2d2;

        }
        .div_page:first-child {
          margin-bottom: 14px;
        }
      }
      .template255_255 {
        width: 128px;
        height: 128px;
        margin: 42px auto 26px;
        background-color: #d2d2d2;
      }
      .template255_150 {
        width: 128px;
        height: 85.4px !important;
        margin: 55px auto 55.6px;
        background-color: #d2d2d2;
      }
    }
    //hcTemplate355_225
    .hcTemplate355_225 {
      .template325_220 {
        width: 128px !important;
        height: 87.1px !important;
        margin: 55.14px auto 54px;
        background-color: #d2d2d2;
      }
      .template225_157 {
        width: 128px;
        height: 180px;
        margin: 10px auto 6px;
        .div_page {
          width: 100%;
          height: 80px !important;
          background-color: #d2d2d2;

        }
        .div_page:first-child {
          margin-bottom: 14px;
        }
      }
      .template220_220 {
        width: 128px;
        height: 128px;
        margin: 42px auto 26px;
        background-color: #d2d2d2;
      }
      .template255_255 {
        width: 128px;
        height: 128px;
        margin: 42px auto 26px;
        background-color: #d2d2d2;
      }
      .template255_150 {
        width: 128px;
        height: 75.3px !important;
        margin: 60px auto 60.7px;
        background-color: #d2d2d2;
      }
    }
    //hcTemplate360_510
    .hcTemplate360_510 {
      .template330_475 {
        width: 128px !important;
        height: 182.86px !important;
        margin: 7.14px auto 6px;
        background-color: #d2d2d2;
      }
      .template330_235 {
        width: 128px;
        height: 180px;
        margin: 10px auto 6px;
        .div_page {
          width: 100%;
          height: 91.43px !important;
          background-color: #d2d2d2;

        }
        .div_page:first-child {
          margin-bottom: 4px;
        }
      }
      .template330_330 {
        width: 128px;
        height: 128px;
        margin: 42px auto 26px;
        background-color: #d2d2d2;
      }
      .template330_320 {
        width: 128px;
        height: 124.27px !important;
        margin: 40px auto 31.7px;
        background-color: #d2d2d2;
      }
    }

  }

  //底部图片框
  .footer_img {
    width: 100%;
    min-width: 1100px;
    //    height: 176px;
    background: #fff;
    position: relative;
    bottom: 0;
    left: 0;
    z-index: 999;
    .footer_up_tittle {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #d2d2d2;
      font-size: 14px;

      color: #6b6b6b;
      .footer_btn {
        height: 30px;
        line-height: 30px;
        background: #fff;
        padding: 0 10px;
        border: 1px solid #b2b2b2;
        border-radius: 5px;
        position: relative;
        outline: none;
        margin: 0 5px;
        font-size: 14px;
        color: #6b6b6b;
        cursor: pointer;
        box-sizing: border-box;
        transition: all .7s;
        &:hover {
          border: 1px solid #a00912;
          color: #a00912;
        }
        &:active {
          position: relative;
          top: 1px;
        }
      }
      span {
        text-align: center;
        display: block;
        cursor: pointer;
      }
      > div {
        width: 33.33%;
        float: left;
        height: 100%;
      }
      .footer_left {
        text-indent: 5%;
      }
      .footer_right {
        text-indent: 5%;
      }

    }
    .fonter_box_img {
      width: 100%;
      height: 116px;
      overflow: hidden;
      > ul {
        padding-bottom: 10px;
        > li {
          width: 100px;
          height: 100px;
          position: relative;
          margin: 8px;
          border: 2px #fff;
          box-sizing: border-box;
          cursor: pointer;
          float: left;
          > img {
            .pubCenter;
          }
        }
        .img_size_border {
          border: 2px solid #a00912 !important;
        }
      }
    }
  }
}

//全局的模态框
#model {
  position: relative;
  z-index: 999;
  .el-button {
    padding: 8px 15px;
  }
  .el-button--danger {
    background: #a00912;
    border: 1px solid #a00912;
    float: right;
  }
  .el-button--danger:hover {
    opacity: .8;
  }
  .el-button:active {
    position: relative;
    top: 1px;
  }
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  .model {
    position: relative;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    .upload_box {
      position: relative;
      .selectImg_10 {
        position: absolute;
        bottom: 15px;
        right: 10px;
        border: 1px solid #a00912;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        transition: all .3s;
        -webkit-user-select: none;
        -moz-user-select: none;
        &:hover {
          background: #a00912;
          color: #fff;
        }
        &:active {
          background: #ccc;
          border: 1px solid #ccc;
        }
      }
      .textBox {
        display: block;
        width: 80%;
        height: 300px;
        margin: 0 auto;
        border: 1px solid #333;
        font-size: 14px;
        text-indent: 4px;
        line-height: 30px;
      }
      .btn_box {
        width: 80%;
        margin: 10px auto;
        height: 34px;
        .el-button {
          padding: 8px 15px;
        }
        .el-button--danger {
          background: #a00912;
          border: 1px solid #a00912;
          float: right;
        }
        .el-button--danger:hover {
          opacity: .8;
        }
        .el-button:active {
          position: relative;
          top: 1px;
        }
      }
      //          >.el-button{
      //              text-align: center;
      //          }
      .pubCenter;
      width: 700px;
      height: 520px;
      background: #fff;
      .upload_title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        position: relative;
        > span {
          margin: 0 10px;
          padding: 10px;
          cursor: pointer;
        }
        .icons:hover {
          opacity: .7;
          > i {
            opacity: .7;
          }
        }
        .icons:active {
          opacity: 1;
          color: #F9C855;
          > i {
            opacity: 1;
            color: #F9C855;
          }
        }
        //撤销
        .return_span {
          width: 70px;
          height: 40px;
          position: absolute;
          left: 0;
          top: 0;
          line-height: 40px;
          padding: 0px;
          color: #333;
        }
        > p {
          text-align: center;
          border-bottom: 1px solid #ddd;
          font-size: 14px;
          color: #333;
        }
        .color_span {
          color: #a00912;
        }
        .close {
          width: 54px;
          height: 30px;
          position: absolute;
          right: 0;
          top: 0;
          color: #333;
          cursor: pointer;
          > i {
            position: relative;
            top: 2px;
            font-size: 18px;
            color: #000;
          }
        }
        .closes {
          width: 30px !important;
          font-size: 26px;
          color: #333;
          top: -2px;

        }
        .closes:hover {
          color: #ccc;
        }
        .closes:active {
          top: -1px;
        }
      }
      //旋转
      .rotate_img {
        width: 86%;
        margin: 0 auto;
        border-top: 1px solid #ddd;
        height: 60px;
        position: absolute;
        bottom: 0;
        left: 8%;
        overflow: hidden;
        > div {
          width: 50%;
          height: 60px;
          float: left;
          text-align: center;
          > div {
            width: 100px;
            cursor: pointer;
            > i {
              display: block;
              color: #3d3d3d;
              margin-top: 10px;
            }
            > span {
              color: #3d3d3d;
              font-weight: 400;
              font-size: 12px;
            }
          }
          > div:hover {
            > i {
              color: #000;
            }
            > span {
              color: #000;
            }
          }
          > div:active {
            position: relative;
            top: 1px;
          }
        }
        .rotate_left_90 {
          > div {
            float: right;
            > i {
              display: block;
            }
            > span {

            }
          }
        }
        .rotate_right_90 {
          > div {
            float: left;
          }
        }
      }
      .upload_inbox {
        padding: 15px;
        position: relative;
        height: 410px;
        //              width: 660px;
        overflow-y: auto;
        //              overflow-x: hidden;
        padding-bottom: 0;
        .imagebox {
          width: 117px;
          height: 117px;
          margin: 4px;
          border: 2px solid #fff;
          overflow: hidden;
          cursor: pointer;
          float: left;
          position: relative;
          > img {
            .pubCenter;
          }
          > i {
            display: block;
            .pubCenter;
            width: 50px;
            height: 50px;
            font-size: 54px;
            color: #ccc;
            cursor: pointer;
            top: -10px;
            right: -4px;
          }
          > .title_msg {

          }
          .text {
            position: absolute;
            bottom: 5px;
            text-align: center;
            font-size: 12px;
            color: #fff;
          }
          &:hover {
            > i {
              color: #de6d74;
            }
            .text {
              color: #de6d74;
            }

          }
        }
        .img_size_border {
          border: 2px solid #a00912 !important;
        }
      }
    }
  }
}

//冲突的element样式
body .el-loading-spinner .path {
  stroke: #333;
}

body .el-loading-spinner .el-loading-text {
  color: #333;
}

//首页
#index {
  width: 100%;
  .el-carousel__item {
    min-width: 1152px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  /*main*/
  .main {
    min-height: 940px;
    overflow: hidden;
    min-width: 1152px;
  }
  .main .cont {
    height: 870px;
    min-width: 1152px;
    padding-top: 69px;
    overflow: hidden;
  }
  .main .cont p {
    color: #333;
    min-width: 206px;
    text-align: center;
    overflow: hidden;
  }
  .main .cont .intro {
    font-size: 18px;
  }
  .main .cont .tit {
    font-size: 64px;
    margin-top: 25px;
    font-weight: 100;
  }
  .main .cont_hc {
    background: url(../img/index_03.jpg) no-repeat center center;
  }
  .main .cont_cth {
    background: url(../img/index_04.jpg) no-repeat center center;
  }
  .main .cont_kh {
    background: url(../img/index_05.jpg) no-repeat center center;
  }
  .main .cont_hb {
    background: url(../img/index_06.jpg) no-repeat center center;
  }
  .main .cont_tl {
    background: url(../img/index_07.jpg) no-repeat center center;
  }
  .main .cont_gl {
    background: url(../img/index_08.jpg) no-repeat center center;
  }
  .main .cont_video {
    background: url(../img/video_04.jpg) no-repeat center center;
    overflow: hidden;
    height: 868px;
  }

  /*video*/
  .main .cont .pvideo {
    height: 310px;
    width: 582px;
    border-radius: 30px;
    border: 2px solid #b09976;
    margin-top: 80px;
    position: relative;
    background: url(../img/sangeren_05.png) no-repeat center center;
  }
  .main .cont .ptext {
    width: 1152px;
    height: 135px;
    font-size: 24px;
    color: #000;
    line-height: 48px;
    margin-top: 90px;
    text-align: left;
  }
  /*.main .cont .pvideo .vbtn{height: 99px;width: 148px;background: rgba(3,3,3,0.5);border-radius: 20px;position: absolute;top:0;left: 0;right: 0;bottom: 0;margin: auto auto;border: none;cursor: pointer;}*/
  .main .cont .pvideo .vbtn {
    height: 99px;
    width: 148px;
    background: url(../img/video_start.png) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    border: none;
    cursor: pointer;
  }

  .main .cont .price {
    margin-top: 620px;
    height: 30px;
  }
  .main .cont .price .s1 {
    font-size: 16px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin-right: 40px;
  }
  .main .cont .price .s2 {
    font-size: 18px;
    font-weight: 100;
    display: inline-block;
    height: 30px;
    line-height: 30px;
  }
  .main .cont .come {
    margin-top: 25px;
    height: 36px;
    text-align: center;
  }
  .main .cont .come input {
    width: 150px;
    border: none;
    background: #010101;
    color: white;
    border-radius: 4px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
  }
  .main .cont .come input:hover {
    opacity: 0.8;
  }
  .main .cont .come input:active {
    opacity: 0.8;
    position: relative;
    top: 1px;
  }
}

//user

#user {
  .work {
    width: 1196px;
    overflow: hidden;
  }
  .workL {
    width: 172px; /*height: 804px;*/
    margin-bottom: 100px;
    border-radius: 5px;
    border: 1px solid #dedede;
    background: #fff;
    margin-top: 14px;
    margin-left: 20px;
  }
  .workL .worklist {
    width: 168px;
    height: 100%;
  }
  .workL .worklist li {
    width: 118px;
    height: 55px;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    font-size: 16px;
    line-height: 55px;
    padding-left: 50px;
    font-weight: 900;
  }
  .workL .worklist li a {
    display: block;
    height: 100%;
    width: 100%;
    color: #303030;
  }
  .workL .worklist .wli {
    border: none;
    font-weight: 100;
    transition: all 0.5s;
  }
  .workL .worklist .wli:hover {
    text-indent: 6px;
  }
  .workL .worklist .wlithat a {
    color: #a00912;
  }
  .workL .worklist .wli001 {
    border-bottom: 1px solid #e5e5e5;
  }

  //  .workL .worklist .wli1{background: url(../img/tubiao_01.png) no-repeat 8px center;}
  //  .workL .worklist .wli2{background: url(../img/tubiao_02.png) no-repeat 8px center;}
  //  .workL .worklist .wli3{background: url(../img/tubiao_03.png) no-repeat 8px center;}
  //  .workL .worklist .wli4{background: url(../img/tubiao_04.png) no-repeat 8px center;}
  //  .workL .worklist .wli5{background: url(../img/tubiao_05.png) no-repeat 8px center;}
  //

  .workR {
    overflow: hidden;
    width: 960px;
    height: 1100px;
    margin-bottom: 100px;
    border-radius: 5px;
    border: 1px solid #dedede;
    background: #fff;
    margin-top: 14px;
    margin-right: 20px;
  }
  .workR .worktit {
    height: 55px;
    font-size: 16px;
    width: 898px;
    border-bottom: 1px solid #DEDEDE;
    color: #303030;
    font-weight: 900;
    line-height: 55px;
  }
  .workR .worktop {
    height: 76px;
    font-size: 16px;
    width: 898px;
    color: #303030;
    line-height: 76px;
  }
  //  .workR .workset{height: 40px;width: 131px;border: 1px solid #9e9e9e;border-radius: 4px;background: #FFFFFF;font-size: 16px;color: 9e9e9e;font-family: "微软雅黑";margin-left: 30px;margin-top: 18px;text-indent: 10px;outline: none;/*background: url(../img/b_jian_07.png) 90% center no-repeat;*/ cursor: pointer;}
  .workR .workworks {
    display: inline-block;
    color: #A00912;
    padding: 0 20px 0 10px;
  }
  .workR .workworks:hover {
    text-decoration: underline;
  }
  .workR .workworks:active {
    position: relative;
    top: 1px;
  }

  .workR .workcont {
    width: 898px;
    height: 850px;
    overflow: hidden;
  }
  .workR .workbox {
    width: 1000px;
    height: 850px;
  }
  .workR .workcont .workphoto {
    width: 260px;
    height: 280px;
    margin-right: 56px;
    margin-bottom: 5px;
    position: relative;
  }
  .workR .workcont .workphoto > b {
    width: 18px;
    height: 18px;
    position: absolute;
    border: 2px solid #bfbfbf;
    top: 8px;
    right: 8px;
    z-index: 8;
    background: #fff;
  }
  .workR .workcont .workphoto > b > i {
    width: 12px;
    height: 12px;
    background: #a00912;
    position: absolute;
    margin: auto auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 50%;
  }
  .workR .workcont .work_img {
    width: 260px;
    height: 195px;
    display: block;
    position: relative;
    overflow: hidden;
  }
  .workR .workcont .work_img img {
    transition: all ease-out 0.5s;
    max-height: 100%;
    max-width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto auto;
  }
  .workR .workcont .work_img img:hover {
    transform: scale(1.2);
  }

  .workR .workcont .workp1 {
    width: 250px;
    overflow: hidden;
    font-size: 14px;
    color: #303030;
    font-weight: 900;
    margin: 8px 10px 8px 10px;
    height: 15px;
  }
  .workR .workcont .workp2 {
    font-size: 14px;
    color: #cbcbcb;
    margin: 0px 10px 0px 10px;
  }
  .workR .workcont .workp3 input {
    font-size: 14px;
    color: white;
    border: none;
    background: #a00912;
    border-radius: 4px;
    padding: 3px 13px 3px 13px;
    cursor: pointer;
  }
  .work_name {
    width: 194px;
    overflow: hidden;
  }
  .workR .workcont .workp3 input:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
  .workR .workcont .workp3 input:active {
    position: relative;
    top: 1px;
  }

  .el-pagination {
    width: 620px;
    margin: 0 auto;
  }
}

//购物车
#cart {
  .positionFixed100 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
  }
  .positionAuto {
    position: absolute;
    margin: auto auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .box-sizing-border {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .p_contenter {
    width: 1200px;
    display: block;
    margin: 0 auto;
  }
  .p_cat {
    line-height: 60px;
    padding-bottom: 100px;
    min-height: 960px;
  }
  .cart_null img {
    text-align: center;
    display: block;
    margin: 148px auto 56px;
  }
  .cart_null .gpWorks {
    line-height: 34px;
    font-size: 20px;
    color: #414040;
    display: table;
    margin: 0 auto;
    margin-bottom: 120px;
  }
  .cart_null .goIndex {
    padding: 0 54px;
    font-size: 17px;
    color: #000;
    border: 1px solid #000;
    line-height: 34px;
    height: 34px;
    display: block;
    width: 70px;
    border-radius: 5px;
    margin: 0 auto;
    margin-bottom: 300px;
  }
  .cart_null .gpWorks:hover {
    text-decoration: underline;
  }
  .cart_null .goIndex:hover {
    color: #fff;
    background: #444;

  }
  .cart_null .goIndex:active {
    position: relative;
    top: 1px;

  }
  .p_cat > .pay_cat {
    width: 1116px;
    margin: 0 auto;
    height: 106px;
  }
  .p_cat > .pay_cat > li {
    float: left;
    font-size: 16px;
    line-height: 106px;
    height: 106px;
  }
  .p_cat > .pay_cat .cat_pay01 {
    width: 71px;
  }
  .p_cat > .pay_cat .cat_pay01 p {
    font-size: 16px;
  }
  .p_cat > .pay_cat .cat_pay01 p b {
    width: 26px;
    height: 26px;
    display: block;
    position: relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #a8a8a8;
    margin-right: 6px;
  }
  .p_cat > .pay_cat .cat_pay01 p b > i {
    width: 14px;
    height: 14px;
    position: absolute;
    margin: auto auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #a00912;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  .p_cat > .pay_cat .cat_pay02 {
    width: 394px;
    text-indent: 16px;
    cursor: pointer;
  }
  .p_cat > .pay_cat .cat_pay03 {
    width: 646px;
  }
  .p_cat > .pay_cat .cat_pay03 > a {
    display: block;
    width: 148px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #333;
    float: right;
    word-spacing: 8px;
    letter-spacing: 3px;
    color: #000;
    margin-top: 30px;
    outline: none;
  }
  .p_cat > .pay_cat .cat_pay03 > a:hover {
    background: #a00912;
    border: 1px solid #a00912;
    color: #fff;
    transition: all 1s;
  }
  .p_cat > .pay_cat .cat_pay03 > a:active {
    position: relative;
    top: 1px;
  }
  .p_cat > dl > dt {
    height: 60px;
    background: #eeeeee;
  }
  .p_cat > dl > dt .tab02 {
    text-indent: 16px;
  }
  .p_cat > dl > dt .tab04 {
    text-indent: 30px;
  }
  .p_cat > dl > dd {
    height: 124px;
  }
  .p_cat > dl > dd .cat_hander {
    height: 124px;
  }
  .p_cat > dl > dd .cat_hander > div {
    height: 124px;
    border-bottom: 1px solid #dcdcdc;
  }
  .p_cat > dl > dd .cat_hander .tab01 {
    border: none;
  }
  .p_cat > dl > dd .cat_hander .tab01 > p {
    margin-top: 30px;
  }
  .p_cat > dl .cat_hander {
    width: 1116px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
  }
  .p_cat > dl .cat_hander div {
    height: 60px;
    float: left;
    font-size: 16px;
  }
  .p_cat > dl .cat_hander .tab01 {
    width: 71px;
  }
  .p_cat > dl .cat_hander .tab01 p {
    font-size: 16px;
  }
  .p_cat > dl .cat_hander .tab01 p b {
    width: 26px;
    height: 26px;
    display: block;
    position: relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #a8a8a8;
    margin-right: 6px;
  }
  .p_cat > dl .cat_hander .tab01 p b > i {
    width: 14px;
    height: 14px;
    position: absolute;
    margin: auto auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #a00912;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  .p_cat > dl .cat_hander .tab02 {
    width: 530px;
  }
  .p_cat > dl .cat_hander .tab02 .img_cat {
    width: 123px;
    height: 113px;
    position: relative;
    padding: 0 11px;
    margin-top: 5px;
  }
  .p_cat > dl .cat_hander .tab02 .img_cat > img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    margin: auto auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .p_cat > dl .cat_hander .tab02 .cp_msg {
    width: 365px;
    height: 86px;
    float: right;
    margin-top: 18px;
    line-height: 43px;
    height: 43px;
  }
  .p_cat > dl .cat_hander .tab02 .cp_msg > span {
    display: block;
    font-size: 19px;
  }
  .p_cat > dl .cat_hander .tab02 .cp_msg > p {
    font-size: 14px;
    color: #666666;
  }
  .p_cat > dl .cat_hander .tab03 {
    width: 160px;
  }
  .p_cat > dl .cat_hander .tab03 > p {
    line-height: 124px;
    font-size: 22px;
    color: #666666;
  }
  .p_cat > dl .cat_hander .tab03 > p > i {
    font-size: 15px;
  }
  .p_cat > dl .cat_hander .tab03 > p > b {
    font-size: 17px;
  }
  .p_cat > dl .cat_hander .tab04 {
    width: 160px;
  }
  .p_cat > dl .cat_hander .tab04 .cat_num {
    width: 100px;
    height: 28px;
    margin-top: 48px;
    position: relative;
  }
  .p_cat > dl .cat_hander .tab04 .cat_num > a {
    width: 26px;
    height: 26px;
    display: block;
    border: 1px solid #ccc;
    overflow: hidden;
    float: left;
    line-height: 30px;
    text-align: center;
    font-size: 24px;
    color: #6d6d6d;
  }
  .p_cat > dl .cat_hander .tab04 .cat_num > a:hover {
    background: #a00912;
    border: 1px solid #a00912;
    color: #fff;
    transition: all 0.5s;
  }
  .p_cat > dl .cat_hander .tab04 .cat_num .cat_num_last {
    font-size: 34px;
    line-height: 24px;
  }
  .p_cat > dl .cat_hander .tab04 .cat_num > b {
    width: 42px;
    height: 28px;
    line-height: 28px;
    display: block;
    float: left;
    text-align: center;
  }
  .p_cat > dl .cat_hander .tab05 {
    width: 132px;
  }
  .p_cat > dl .cat_hander .tab05 > p {
    line-height: 124px;
    font-size: 22px;
    color: #666666;
  }
  .p_cat > dl .cat_hander .tab05 > p > i {
    font-size: 15px;
  }
  .p_cat > dl .cat_hander .tab05 > p > b {
    font-size: 17px;
  }
  .p_cat > dl .cat_hander .tab06 {
    width: 60px;
    position: relative;
    text-align: center;
  }
  .p_cat > dl .cat_hander .tab06 > b {
    width: 25px;
    height: 27px;
    display: block;
    background: url(../img/p_cat_icon01.png) no-repeat;
    position: absolute;
    margin: auto auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
  }

}

#confimOrder {
  .order1 {
    width: 1200px;
    min-height: 220px;
    padding-top: 42px;
    overflow: hidden;
  }
  .ord1-tit {
    font-size: 16px;
    height: 36px;
    line-height: 36px;
  }
  .ord1m {
    min-height: 160px;
    padding: 0 23px 23px 23px;
    width: 850px;
  }
  .ord1m2 {
    width: 277px;
    height: 165px;
    padding-top: 23px;
    padding-right: 23px;
  }
  .rod001 {
    width: 1200px;
    min-height: 188px;
    overflow: hidden;
    border: 1px solid #c9c9c9;
    box-sizing: border-box;
  }
  .xuanze {
    display: block;
    height: 15px;
    width: 15px;
    border: 1px solid #C9C9C9;
    margin-right: 20px;
    margin-top: 2px;
    position: relative;
  }
  .xz01 {
    display: block;
    height: 7px;
    width: 7px;
    border-radius: 4px;
    background: #A00912;
    top: 4px;
    left: 4px;
    position: absolute;
  }
  .ord1m_1 {
    font-size: 16px;
    margin-top: 28px;
    height: 30px;
  }
  .ord1m_1 p {
    font-size: 16px
  }
  .ord1m_1 span {
    margin-right: 50px;
  }
  .ord1m-btm {
    height: 30px;
    width: 120px;
    color: white;
    background: #A00912;
    border: none;
    border-radius: 4px;
  }
  .ord1m_2 {
    font-size: 16px;
    margin-top: 20px;
    color: #999;
    height: 24px;
  }
  .ord1m_2 span {
    display: block;
    float: left;
  }
  .ord1m_3 {
    font-size: 16px;
    margin-top: 20px;
  }
  .ord1m_3 select {
    height: 36px;
    width: 125px;
    border: 1px solid #999;
    color: #A00912;
    font-size: 16px;
    outline: none;
    border-radius: 4px;
    padding-left: 20px;
    font-weight: 900;
  }

  /*ssssssssssssssssssss*/
  .order2 {
    width: 1200px;
    clear: both;
  }
  .ord2-tit {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    margin-top: 25px;
    border-bottom: 1px solid #999;
  }
  .ord2-nav {
    height: 63px;
    padding-left: 30px;
    padding-right: 50px;
    line-height: 50px;
    font-size: 16px;
  }
  .ord2-nav .r {
    margin-left: 98px;
  }
  .ord2-main {
    min-height: 90px;
    background: #f6f6f6;
    padding-bottom: 10px;
  }
  .or2m-t {
    height: 125px;
    width: 1155px;
    border-bottom: 1px solid #e2e2e2;
  }
  .or2m-t-l {
    height: 98px;
    width: 420px;
    padding-top: 28px;
  }
  .or2m-t-l > .img {
    width: 119px;
    height: 78px;
    display: block;
    position: relative; /*border:1px solid #c9c9c9;*/
  }
  .or2m-t-l > .img > img {
    position: absolute;
    margin: auto auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 100%;
    max-width: 100%;
  }
  .or2m-t-l div {
    height: 80px;
    width: 260px;
    margin-left: 18px;
  }
  .or2m-t-l .p1 {
    font-size: 15px;
    margin-top: 20px;
  }
  .or2m-t-l .p2 {
    font-size: 14px;
    margin-top: 20px;
  }
  .or2m-t-1 {
    width: 100px;
    height: 30px;
    font-size: 16px;
    margin-top: 80px;
    margin-left: 100px;
  }
  .or2m-t-2 {
    margin-right: 74px;
    margin-top: 76px;
  }
  .or2m-t-2 .s1 {
    font-size: 14px;
  }
  .or2m-t-2 .s2 {
    font-size: 20px;
  }
  .redd {
    color: #A00912;
    margin-right: 0;
  }
  .ritdh {
    margin-left: 200px;
  }
  .or2m-b {
    height: 174px;
    width: 1155px;
  }
  .or2m-b-tit {
    font-size: 16px;
    margin-top: 13px;
    margin-bottom: 13px;
  }
  .or2bm {
    height: 98px;
  }
  .voucher {
    width: 270px;
    height: 94px;
    background: url(../img/fan_djq_03.jpg) no-repeat left top;
    border-radius: 4px;
    margin-right: 24px;
  }
  .voucher-l {
    height: 94px;
    width: 83px;
    font-size: 14px
  }
  .voucher-r {
    height: 92px;
    width: 186px;
    border: 1px solid #ff9e01;
    border-left: none;
    background: white;
    border-radius: 0 4px 4px 0;
  }
  .huibor {
    border: 1px solid #e5e5e5;
    border-left: none;
    border-radius: 0 4px 4px 0;
  }
  .voucher-l .s1 {
    font-size: 20px;
    color: white;
  }
  .voucher-l .s2 {
    font-size: 14px;
    color: white;
  }
  .voucher-l p {
    text-align: center;
  }
  .voucher-l .p2 {
    margin-top: 20px;
  }
  .voucher-l .p1 {
    margin-top: 8px;
    color: #fdcc7d;
  }
  .vr1 {
    margin-left: 23px;
    margin-top: 13px;
    font-weight: 900;
    font-size: 14px
  }
  .vr2 {
    margin-left: 23px;
    font-size: 12px;
    margin-top: 3px;
  }
  .vr3 {
    margin-left: 23px;
    font-size: 12px;
    margin-top: 3px;
  }
  .vr3 span {
    color: #ff9e01;
  }
  .vr4 {
    height: 22px;
    font-size: 12px;
    color: #bdbdbd;
    border-top: 1px dashed #eaeaea;
    margin-top: 3px;
    text-align: right;
  }
  .notes {
    height: 90px;
    width: 1155px;
    margin-top: 30px;
  }
  .note-top {
    height: 50px;
  }
  .ntl {
    height: 30px;
    width: 420px;
    font-size: 16px;
    font-weight: 900px;
    margin-top: 30px;
  }
  .ntl span {
    font-size: 14px;
    color: #A00912;
  }
  .ntr {
    height: 30px;
    width: 400px;
    margin-top: 25px;
  }
  .ntrtxt {
    width: 278px;
    height: 28px;
    text-align: center;
  }
  .ntrbtn {
    width: 90px;
    height: 30px;
    border: none;
    background: #A00912;
    color: white;
    font-size: 14px;
    border-radius: 4px;
    margin-left: 15px;
  }
  .nthbz {
    display: block;
    width: 1113px;
    height: 39px;
    padding: 0 20px;
    font-size: 14px
  }
  .bill {
    width: 1155px;
    height: 38px;
    border-bottom: 1px solid #d2d2d2;
    font-size: 16px;
    color: #3b3a3a;
    margin-top: 40px;
    line-height: 38px;
  }
  .billl {
    display: inline-block;
  }
  .billr span {
    margin-left: 60px;
    font-size: 16px
  }
  .billr a {
    color: #A00912;
    margin-left: 60px;
    font-size: 16px
  }
  .pay {
    height: 30px;
    width: 1155px;
    margin-top: 30px;
    font-weight: 900;
    border-bottom: 1px solid #d2d2d2;
    height: 150px;
    margin-bottom: 30px;
  }
  .pay-tit {
    height: 30px;
    width: 1155px;
    line-height: 30px;
    border-bottom: 1px solid #d2d2d2;
    font-size: 16px;
  }
  .pay-cont {
    height: 120px;
  }
  .pay-cont a {
    border-radius: 5px;
    display: block;
    height: 100px;
    width: 85px;
    font-size: 16px;
    color: #3A3A3A;
    text-align: center;
    line-height: 150px;
    margin-right: 40px;
    font-weight: 100;
    margin-top: 10px;
  }
  .pay-cont .a1 > div {
    background: url(../img/fan-zhufu_07.png) no-repeat;
    width: 40px;
    height: 40px;
    background-size: 100%;
    margin: 20px auto 0;
  }
  .pay-cont .a2 > div {
    background: url(../img/fan-zhufu_09.png) no-repeat;
    width: 40px;
    height: 40px;
    background-size: 100%;
    margin: 20px auto 0;
  }
  .pay-cont a > p {
    height: 26px;
    line-height: 32px;
    font-size: 14px;
    font-weight: 400;
    color: #3b3a3a;
  }
  .detail {
    width: 1155px;
    height: 50px;
  }
  .dtl01 p {
    font-size: 16px;
    margin-left: 68px;
    text-align: right;
  }
  .bul {
    color: #00aaef;
  }
  .money {
    font-size: 16px;
  }
  .money span {
    color: #A00912;
    font-size: 26px;
  }
  .btnaa .btna1 {
    display: inline-block;
    padding-left: 40px;
    height: 30px;
    line-height: 30px;
    background: url(../img/jsggc_14.jpg) no-repeat 0 0;
    font-size: 16px;
    color: #A00912;
  }
  .btnaa .btnbtn {
    cursor: pointer;
    width: 150px;
    height: 30px;
    border: none;
    color: white;
    background: #A00912;
    border-radius: 4%;
    margin-left: 46px;
    font-size: 14px
  }
  .btnaa .btnbtn:hover {
    background: #CC0000;
  }
  .btnaa .btnbtn:active {
    position: relative;
    top: 1px;
  }
  .defd p {
    margin-left: 38px;
    color: #555;
  }
  .defd p span {
    margin-right: 5px;
    font-size: 15px
  }
  .mt2 {
    margin-top: 40px;
  }
  .active_pay {
    background-color: #efefef !important;
  }

}

#orderList {
  .container {
    .wrapper {
      .lineR {
        width: 960px;
        border-radius: 5px;
        background: #fff;
        margin-bottom: 100px;
      }
      .lineR .linetit {
        height: 55px;
        font-size: 16px;
        width: 898px;
        color: #303030;
        line-height: 55px;
      }
      .lineRs {
        width: 960px;
        height: 56px;
        margin-right: 20px;
        margin-top: 14px;
      }
      body .lineR2 {
        margin-top: 0;
      }
      .lineRs ul {
        height: 55px;
        font-size: 16px;
        width: 898px;
        color: #303030;
        line-height: 55px;
        margin: 0 auto;
      }
      .lineRs ul > li {
        cursor: pointer;
        float: left;
        line-height: 56px;
        font-size: 16px;
        width: 70px;
        text-align: center;
        margin-right: 30px;
        position: relative;
      }
      .lineRs ul > li:hover {
        color: #969696;
      }
      .lineRs ul > li:active {
        position: relative;
        top: 1px;
      }
      .lineRs ul > li > b {
        position: absolute;
        top: 12px;
        z-index: 8;
        font-size: 12px;
        right: -6px;
        display: block;
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #c50b16;
        color: #fff;
        line-height: 16px;
        text-align: center;
      }
      .lineRs ul > li > i {
        position: absolute;
        height: 2px;
        width: 100%;
        bottom: 12px;
        left: 0;
        display: block;
      }
      .main {
        .linetit p span {
          text-align: center;
          display: inline-block;
          font-size: 16px;
        }
        .lets1 {
          width: 130px;
        }
        .lets2 {
          width: 143px;
        }
        .lets3 {
          width: 115px;
        }
        .lets4 {
          width: 109px;
        }
        .lineliet {
          width: 898px;
          min-height: 160px;
          border: 1px solid #dcdcdc;
          overflow: hidden;
          margin-bottom: 14px;
        }
        .linetop {
          height: 39px;
          background: #eee;
          width: 898px;
          line-height: 39px;
        }
        .lines1 {
          margin-left: 20px;
          color: #999;
          margin-right: 30px;
        }
        .linecont {
          min-height: 123px;
          overflow: hidden;
        }
        .lect1 {
          min-height: 123px;
          overflow: hidden;
          width: 397px;
        }
        .lect0 {
          height: 123px;
          border-left: 1px solid #dcdcdc;
          font-size: 16px;
          text-align: center;
        }
        .lectm_img {
          height: 80px;
          width: 120px;
          margin-left: 20px;
          position: relative;
        }
        .lectm_ct {
          width: 210px;
          height: 80px;
          margin-left: 20px;
          padding-right: 20px;
        }
        .lectm_img > img {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto auto;
          max-height: 100%;
          max-width: 100%;
        }
        .lect_top {
          font-size: 16px;
          font-weight: 900;
        }
        .lectmain {
          margin-top: 20px;
          height: 80px;
          padding-bottom: 20px;
        }
        .lect_cer {
          font-size: 14px;
          color: #6F6F6F;
          margin-top: 12px;
        }
        .shr {
          font-size: 16px;
          font-weight: 900;
          line-height: 80px;
        }
        .jine {
          line-height: 25px;
        }

        .mt1 {
          margin-top: 15px;
        }
        .jine01 {
          font-size: 16px;
          color: #000;
        }
        .jine02 {
          font-size: 14px;
          color: #a00912;
        }
        .jine03 {
          font-size: 16px;
          color: #999999;
        }
        .jine04 {
          font-size: 14px;
          color: #999999;
        }
        .lect0 > p > a {
          color: #888;
        }
        .fkzt {
          font-size: 14px;
          line-height: 25px;
        }
        .ddfk {
          color: #A00912;
        }
        .ywc {
          color: #999;
        }
        .csctbtn1 {
          height: 21px;
          width: 80px;
          color: white;
          background: #A00912;
          border-radius: 4px;
          border: none;
          cursor: pointer;
        }
        .csctbtn1:hover {
          background: #8a0b13;
        }
        .csctbtn1:active {
          position: relative;
          top: 1px;
          background: #A00912;
        }
        .csctbtn2 {
          height: 21px;
          width: 80px;
          color: #3a3a3a;
          background: white;
          border-radius: 4px;
          border: none;
        }
        .csctbtn3 {
          height: 21px;
          width: 80px;
          color: #3a3a3a;
          background: white;
          border-radius: 4px;
          border: none;
        }
        .csctbtn2:hover {
          text-decoration: underline;
          cursor: pointer;
          opacity: 0.8;
        }
        .order_null {
          line-height: 50px;
          height: 50px;
          text-align: center;
          display: block;
          color: #afafaf;
          font-size: 16px;
        }
      }
    }

  }

}

#htm {
  #payOrder {
    width: 100%;
    height: 100%;

    .top {
      line-height: 160px;
      text-align: center;
      font-size: 28px;
      height: 160px;
      border-bottom: 1px solid #D2D2D2;
      > span {
        color: #A00912;
      }
    }
    .content {
      width: 1200px;
      height: 800px;
      margin: 80px auto;
      .price {
        width: 500px;
        height: 314px;
        margin: 0 auto;
        background: url('http://test.artup.com/img/10phone_03.jpg') no-repeat right top;
      }
      .times {
        text-align: center;
        height: 4rem;
        line-height: 4rem;
        > span {
          color: #A00912;
        }

      }
      .ewm {
        height: 312px;
        width: 258px;
        border-radius: 4px;
        border: 1px solid #d2d2d2;
        text-align: center;
        position: relative;
        .tit {
          height: 60px;
          line-height: 60px;
          text-align: center;
          font-size: 24px;

        }
        .tm {
          bottom: 15px;
          font-size: 16px;
          position: absolute;
          width: 100%;
          text-align: center;
          > span {
            color: #A00912;
          }

        }
      }
    }
  }
  #payCancel {
    width: 100%;
    height: 600px;

    .topBox {
      width: 100%;
      min-height: 380px;
      border-bottom: 1px solid #D2D2D2;

      .msg {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        overflow: hidden;
        .leftBox {
          width: 200px;
          height: 180px;
          margin-top: 130px;
          margin-left: 280px;
          position: relative;
          float: left;
          > i {
            width: 90px;
            height: 90px;
            display: block;
            font-size: 66px;
            text-align: center;
            position: absolute;
            margin: auto auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
          }
        }
        .rightBox {
          width: 550px;
          height: 180px;
          margin-right: 160px;
          float: left;
          margin-top: 130px;
          font-size: 16px;
          > ul > li {
            height: 50px;
            line-height: 50px;
            > span {
              color: #A00912;
            }
          }
          li:nth-child(1) {
            font-size: 20px;
          }
          li:nth-child(2) {
            color: #3a3a3a;
          }

        }
      }
    }
    .payOk {
      border-bottom: none !important;
    }
    .payOkBtn {
      width: 330px;
      height: 36px;
      position: absolute;
      margin: auto auto;
      left: 0;
      right: 0;
      > ul > li {
        width: 120px;
        height: 36px;
        float: left;
        line-height: 36px;
        text-align: center;
        margin-left: 28px;
        background-color: #a00912;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }
    }
    .bottomBox {
      height: 590px;
      width: 1200px;
      margin: 0 auto;
      position: relative;
      .orderMsg {
        width: 900px;
        min-height: 200px;
        margin-top: 40px;
        > ul > li {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          color: #999999;
        }
        li:first-child {
          font-size: 20px;
        }
      }

      .btnBox {
        width: 330px;
        height: 36px;
        position: absolute;
        bottom: 170px;
        margin: auto auto;
        left: 0;
        right: 0;
        > ul > li {
          width: 120px;
          height: 36px;
          float: left;
          line-height: 36px;
          text-align: center;
          margin-left: 36px;
          background-color: #a00912;
          border-radius: 4px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
}

#albumSelect {
  .oprateOut {
    background-color: #efefef;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 1px;
    .oprateBox {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      justify-content: space-between;
      -o-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -webkit-justify-content: space-between;
      width: 1280px;
      margin: 0 auto;
      height: 50px;
      .space {
        width: 40%;
      }
      .titleName {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        width: 20%;
        justify-content: center;
        -o-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -webkit-justify-content: center;
        padding-top: 15px;
      }
      .oprateBtn {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: flex-end;
        -o-justify-content: flex-end;
        -moz-justify-content: flex-end;
        -ms-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        width: 40%;
        padding-top: 11px;
        .btnStyle {

          width: 80px;
          height: 30px;
          border: 1px solid #adadad;
          border-radius: 3px;
          cursor: pointer;
          padding-top: 4px;
          text-align: center;
          a {
            color: #000;
          }
          &:hover {
            opacity: 0.8;
            color: #3a3a3a;
          }
          &:active {
            position: relative;
            top: 1px;
          }
        }
        .create {
          width: 150px;
          margin-left: 20px;
          &:hover {
            opacity: 0.8;
          }
          &:active {
            position: relative;
            top: 1px;
          }
        }
      }
    }
  }
  .container-box {
    background-color: #efefef;
    padding: 145px 0 505px 0;
    .container-fluid {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
      box-sizing: border-box;
      height: 242px;

      .themeBox {
        width: 1172px;
        height: 100%;
        margin: 0 auto;
        .themeDiv {
          width: 25%;
          float: left;
          .img_div {
            text-align: center;
            margin-bottom: 10px;
            border: 3px solid transparent;
            padding: 3px;
            cursor: pointer;
            width: 223px;
          }
          .active {
            background: #fff;
            border: 1px solid;
          }
          .styleId {
            display: none;
          }
        }
        .text-center {
          text-align: center;
        }
      }

    }
  }
}

//宝宝书自定义样式
.bbs_size .template02 {

}

//lomo卡自定义样式
.lomoTemplate .bbs_hengban {
  width: 249px !important;
  height: 170px !important;
  margin: 13px auto !important;
}

body .lomoTemplate .template04 {
  width: 128px !important;
  height: 147.53px !important;
  margin: 24px auto !important;
}

//合集编辑

#hejiEdit {

  .pubilc_heji_div {
    background: #fff;
  }
  .time_bg {
    width: 232px;
    height: 204px;
    .page {
      height: 42px;
    }
  }
  .bbs_hengban {
    width: 212px;
    height: 142px;
    margin: 11px;
  }
  .pageleft {
    text-indent: 100px;
  }
}

//台历编辑
#gualiEdit {
  .guali_img {
    height: 34px;
    img {
      width: 100%;
    }
  }
  .pubilc_heji_div {
    background: #fff;
  }

  //小台历
  .taili_xiaoguali {
    width: 152px !important;
    height: 260px !important;
    overflow: hidden;
    .guali_first {
      height: 220px !important;
      pointer-events: none !important;
      .div_page {
        background: url("http://image2.artup.com/static/pc/gl/260-380.jpg") no-repeat;
        background-size: 100% 100%;
      }
    }

    .time_pu {
      .bbs_hengban {
        width: 140px;
        height: 184px;
        margin: 6px auto 6px;
      }
      //  页数
      .page {
        .pageleft {
          width: 152px;
        }
      }

    }
  }

  //  台历竖着的时候
  .taili_shu {
    .guali_first {
      height: 272px !important;
      margin-top: 2px;
    }
    height: 300px !important;
    overflow: hidden;
    .time_bg {
      height: 300px;

    }
    .time_pu {
      .bbs_hengban {
        height: 230px;
      }
    }
  }
  .time_bg {
    width: 232px;
    height: 224px;
    .guali_first {
      height: 188px;
    }
    .page {
      height: 30px;
      margin-top: 0;
      //  页码
      .opacity_page {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        height: 30px;
        background: #efefef;
      }
    }
  }
  .bbs_hengban {
    width: 100%;
    height: 154px;
    margin: 10px auto 0;

  }
  .pageleft {
    width: 232px;
    text-align: center !important;
    display: block;
    text-indent: 0;
  }

}

//旅行记
#product {
  .travelEdit_one { //旅行记
    .titlePage_bg {
      width: 324px;
      height: 168px;
    }
    .time_bg {
      width: 324px;
      height: 194px;
      position: relative;
      .firstPage {
        background: #1d1c19;
        height: 168px;
        .page_bg {
          height: 168px;
        }
      }
      .lastPage {
        background: #efefef;
        height: 168px;
        .page_bg {
          height: 168px;
        }
      }
      .pubilc_div {
        height: 194px;
      }
      .time_pu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        border-left: 1px solid #efefef;

        //如果有页脚和封底的时候
        .page_b {
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 99;
          text-align: center;
          background: #efefef;
        }
        .title_text_1{
          height: 20px;
          text-align: center;
          line-height: 20px;
          color: #8b682a;
          font-size: 14px;
          font-weight: 600;
          width: 100%;
          border: none;
        }
        .title_text_2{
          width: 100%;
          height: 16px;
          text-align: center;
          line-height: 16px;
          color: #adadad;
          font-size: 13px;
          border: none;
        }
        .title_strong {
          display: block;
          text-align: center;
          line-height: 20px;
          color: #8b682a;

        }
        .lxj_text_4,.lxj_text_5{
          width: 136px;
        }
        .title_strong2 {
          display: block;
          text-align: center;
          font-weight: 400;
          font-size: 13px;
          color: #adadad;
          line-height: 16px;
        }
        //旅行记尾部
        .template_lxj_100 {
          width: 58px;
          height: 58px;
          margin: 55px auto;
        }
        .template_lxj_0 { //首页
          width: 136px;
          height: 104px;
          margin: 0 auto;
          margin-top: 16px;
          margin-bottom: 8px;
        }
        .template_lxj_1 {
          width: 162px;
          height: 194px;
          .mainTitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 100px;
            margin-left: 42px;
            margin-top: 40px;
          }
          .box_text {
            width: 108px;
            height: 58px;
            margin-top: 14px;
            margin-bottom: 44px;
            margin-left: 42px;
          }
        }
        .template_lxj_2 {
          margin: 20px auto;
        }
        .template_lxj_3 {
          width: 106px;
          height: 134px;
          margin: 17px auto;
        }
        .template_lxj_4 {
          width: 136px;
          height: 102px;
          margin: 25px auto;
        }
        .template_lxj_5 {
          width: 136px;
          height: 90px;
          margin: 31px auto;
        }
        .template_lxj_6 {
          width: 139px;
          height: 96px;
          margin: 28px auto;
          .div_page {
            width: 66px;
            height: 96px;
          }
        }
        .template_lxj_7 {
          width: 140px;
          height: 92px;
          margin: 30px auto;
          position: relative;
          .img_page_1{
            width: 70px;
            height: 92px;
          }
          .img_page_2{
            width: 66px;
            height: 44px;
            position: absolute;
            right: 0;
            top:0px;
          }
          .img_page_3{
            width: 66px;
            height: 44px;
            position: absolute;
            right: 0;
            top:48px;
          }
        }
      }
    }
  }
}

//毕业记
#product {
  .biyejiEdit_one { //毕业记
    .titlePage_bg {
      width: 324px;
      height: 168px;
    }
    .time_bg {
      width: 324px;
      height: 194px;
      position: relative;
      .firstPage {
        background: #1d1c19;
        height: 168px;
        .page_bg {
          height: 168px;
        }
      }
      .lastPage {
        background: #efefef;
        height: 168px;
        .page_bg {
          height: 168px;
        }
      }
      .pubilc_div {
        height: 194px;
      }
      .time_pu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        border-left: 1px solid #efefef;

        //如果有页脚和封底的时候
        .page_b {
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 99;
          text-align: center;
          background: #efefef;
        }
        .title_strong {
          display: block;
          text-align: center;
          line-height: 20px;
          color: #8b682a;

        }
        .title_strong2 {
          display: block;
          text-align: left;
          font-weight: 400;
          font-size: 12px;
          color: #adadad;
          line-height: 16px;
          white-space:nowrap;
          width: 100%;
          transform: scale(0.7);
          position: relative;
          left: -8px;
        }

        .title_text_1{
          height: 20px;
          text-align: center;
          line-height: 20px;
          color: #8b682a;
          font-size: 14px;
          font-weight: 600;
          width: 100%;
          border: none; white-space:nowrap;

        }
        .title_text_2{
          width: 100%;
          height: 16px;
          text-align: center;
          line-height: 16px;
          color: #adadad;
          font-size: 12px;
          border: none;
          white-space:nowrap;
          //transform: scale(0.7);
          //position: relative;
          //left: -8px;
        }
        .byj_text_6,.byj_text_7{
          width: 140px;
        }
        .byj_text_5,.byj_text_4{
          width: 136px;
        }
        //旅行记尾部
        .template_lxj_100 {
          width: 58px;
          height: 58px;
          margin: 55px auto;
        }
        .template_lxj_0 { //首页
          width: 136px;
          height: 104px;
          margin: 0 auto;
          margin-top: 16px;
          margin-bottom: 8px;
        }
        .template_lxj_1 {
          width: 162px;
          height: 194px;
          .mainTitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 100px;
            margin-left: 42px;
            margin-top: 40px;
          }
          .box_text {
            width: 108px;
            height: 58px;
            margin-top: 14px;
            margin-bottom: 44px;
            margin-left: 42px;
          }
        }
        .template_lxj_2 {
          margin: 20px auto;
        }
        .template_lxj_3 {
          width: 106px;
          height: 134px;
          margin: 17px auto;
        }
        .template_lxj_4 {
          width: 136px;
          height: 102px;
          margin: 25px auto;
        }
        .template_lxj_5 {
          width: 136px;
          height: 90px;
          margin: 31px auto;
        }
        .template_lxj_6 {
          width: 139px;
          height: 96px;
          margin: 28px auto;
          .div_page {
            width: 66px;
            height: 96px;
          }
        }
        .template_lxj_7 {
          width: 140px;
          height: 92px;
          margin: 30px auto;
          position: relative;
          .img_page_1{
            width: 70px;
            height: 92px;
          }
          .img_page_2{
            width: 66px;
            height: 44px;
            position: absolute;
            right: 0;
            top:0px;
          }
          .img_page_3{
            width: 66px;
            height: 44px;
            position: absolute;
            right: 0;
            top:48px;
          }
        }
      }
    }
  }
}
//遇见情缘(七夕书)
#product {
  .qixishuEdit_one { //毕业记
    //.lastPage:nth-child(2){
    //  background: #6d6d6d;
    //}
    .time_bg:last-of-type{
      .lastPage{
        background: #e7d9ce !important;
      }
    }
    .title_text_1{
      height: 20px;
      text-align: center;
      line-height: 20px;
      color: #8b682a;
      font-size: 14px;
      font-weight: 600;
      width: 100%;
      border: none; white-space:nowrap;

    }
    .title_text_1_2{
      width: 100%;
      height: 16px;
      text-align: center;
      line-height: 16px;
      color: #adadad;
      font-size: 12px;
      border: none;
      white-space:nowrap;
      //transform: scale(0.7);
      //position: relative;
      //left: -8px;
    }
    .title_text_2{
      text-align: center;
    }
    .time_pu_4{
      .bg_time_pu{
          width: 32px;
          height: 14px;
          position: absolute;
          left: 50%;
           top: 15px;
         margin-left: -16px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_02.png") no-repeat;
        background-size: 100%;
      }
      .title_text_4{
        width: 78px;
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        text-align: center;
        margin: 33px auto 6px;
      }
    }
    .time_pu_5{
      .bg_time_pu{
        width: 26px;
        height: 19px;
        position: absolute;
        left: 20px;
        top: 13px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_06.png") no-repeat;
        background-size: 100%;
      }
    }
    .time_pu_6{
      .bg_time_pu{
        width: 32px;
        height: 14px;
        position: absolute;
        left: 50%;
        top: 17px;
        margin-left: -16px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_03.png") no-repeat;
        background-size: 100%;
      }
      .title_text_6{
        width: 50px;
        height: 24px;
        line-height: 12px;
        text-align: center;
        margin: 0 auto 22px;
      }
    }
    .time_pu_7{
      .title_text_7{
        width: 32px;
        line-height: 12px;
        height: 12px;
        position: absolute;
        right: 8px;
        bottom: 36px;
      }
    }
    .time_pu_8{
        .bg_time_pu{
          width: 14px;
          height: 7px;
          position: absolute;
          right:26px;
          top: 134px;
          margin-left: -7px;
          background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_04.png") no-repeat;
          background-size: 100%;
        }
      .title_text_8{
        width: 32px;
        line-height: 14px;
        height: 14px;
        position: absolute;
        right: 8px;
        bottom: 36px;
      }
    }
    .time_pu_9{
      .bg_time_pu{
        width: 26px;
        height: 18px;
        position: absolute;
        left: 6px;
        top: 121px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_14.png") no-repeat;
        background-size: 100%;
      }
      .title_text_9{
        width: 58px;
        height: 12px;
        line-height: 12px;
        margin: 8px 0 32px 32px;
        z-index: 99;
        &:after{
          content: "";
          position: absolute;
          width: 58px;
          height: 2px;
          bottom: 56px;
          left: 34px;
          border-bottom: 1px dashed red;
        }
      }
    }
    .time_pu_10{
      .bg_time_pu{
        width: 12px;
        height: 23px;
        position: absolute;
        right: 6px;
        top: 142px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_15.png") no-repeat;
        background-size: 100%;
      }
      .title_text_10{
        width: 58px;
        height: 12px;
        line-height: 12px;
        margin-right: 18px;
        margin-top: 34px;
        margin-bottom: 10px;
        z-index: 99;
        &:after{
          content: "";
          position: absolute;
          width: 58px;
          height: 2px;
          bottom: 34px;
          right: 18px;
          border-bottom: 1px dashed red;
        }
      }
    }
    .time_pu_11{
      .bg_time_pu{
        width: 152px;
        height: 17px;
        position: absolute;
        left: 10px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_09.png") no-repeat;
        background-size: 100%;
        top:136px;
      }
    }
    .time_pu_12{
      .bg_time_pu{
        width: 40px;
        height: 86px;
        position: absolute;
        right: 16px;
        top:54px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_16.png") no-repeat;
        background-size: 100%;
        &:after{
          content: "";
          position: absolute;
          width: 104px;
          height: 2px;
          bottom: -1px;
          left: -105px;
          border-bottom: 1px dashed #f78a96;
        }
      }
    }
    .time_pu_13{
      .bg_time_pu{
        width: 32px;
        height: 14px;
        position: absolute;
        left: 50%;
        top: 17px;
        margin-left: -16px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_11.png") no-repeat;
        background-size: 100%;
      }
      .title_text_13{
        width: 50px;
        height: 16px;
        line-height: 12px;
        text-align: center;
        margin: 5px auto 5px;
      }
    }
    .time_pu_14{
      background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_13.png") no-repeat;
      background-size: 100%;
      background-position-y:8px;
    }
    .time_pu_15{
      .title_text_15{
        width: 99px;
        text-align: center;
      }
    }
    .time_pu_16{
      .title_text_16{
        width: 106px;
        margin: 6px 0 6px 6px;
      }
    }
    .time_pu_17{
      .title_text_17{
        width: 106px;
        margin: 6px auto;
        margin-right: 6px;
      }
    }
    .time_pu_19{
      .bg_time_pu{
        width: 78px;
        height: 134px;
        position: absolute;
        right: 0px;
        top: 36px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_10.png") no-repeat;
        background-size: 100%;
      }
    }
    .time_pu_21{
      .bg_time_pu{
        width: 150px;
        height: 12px;
        position: absolute;
        left: 0px;
        top: 155px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_05.png") no-repeat;
        background-size: 100%;
      }
      .title_text_21{
        position: relative;
        z-index: 99;
        width: 110px;
        margin-top: 14px;
      }
    }
    .time_pu_22{
      .bg_time_pu{
        width: 28px;
        height: 18px;
        margin: 45px auto 4px;
        background: url("http://image2.artup.com/static/pc/qixishu/tempng/tem_17.png") no-repeat;
        background-size: 100%;
      }
      .title_text_22{
        //text-align: center;
        height: 40px;
        width: 140px;
        line-height: 12px;
        margin: 10px auto 55px;
      }
      //.title_text_22_2{
      //  margin: 6px auto 71px;text-align: center;
      //  height: 12px;border: none;
      //}
    }
    .titlePage_bg {
      width: 324px;
      height: 168px;
    }
    .time_bg {
      width: 324px;
      height: 194px;
      position: relative;
      .firstPage {
        background: #1d1c19;
        height: 168px;
        .page_bg {
          height: 168px;
        }
      }
      .lastPage {
        background: #efefef;
        height: 168px;
        .page_bg {
          height: 168px;
        }
      }
      .pubilc_div {
        height: 194px;
      }
      .time_pu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        border-left: 1px solid #efefef;

        //如果有页脚和封底的时候
        .page_b {
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 99;
          text-align: center;
          background: #efefef;
        }
        .title_strong {
          display: block;
          text-align: center;
          line-height: 20px;
          color: #8b682a;
          font-size: 12px;
        }
        .title_strong2 {
          display: block;
          text-align: left;
          font-weight: 400;
          font-size: 12px;
          color: #adadad;
          line-height: 16px;
          white-space:nowrap;
          width: 100%;
          transform: scale(0.7);
          position: relative;
          left: -8px;
        }
        //旅行记尾部
        .template_lxj_100 {
          width: 58px;
          height: 58px;
          margin: 55px auto;
        }
        .template_lxj_0 { //首页
          width: 127px;
          height: 98px;
          margin: 0 auto;
          margin-top: 17px;
          margin-bottom: 13px;
        }
        .template_lxj_1 {
          width: 150px;
          height: 150px;
          margin: 9px auto 9px;
        }
        .template_lxj_2 {
          width: 122px;
          height: 122px;
          margin: 15px auto;
        }
        .template_lxj_3 {
          width: 149px;
          height: 126px;
          margin: 21px auto;
        }
        .template_lxj_4 {
          width: 148px;
          height: 105px;
          margin: 6px auto 10px;
        }
        .template_lxj_5 {
          width: 132px;
          height: 112px;
          margin: 46px auto 10px;
        }
        .template_lxj_6 {
          width: 98px;
          height: 70px;
          margin: 38px auto 14px;
        }
        .template_lxj_7 {
          width: 104px;
          height: 146px;
          margin: 12px 0 10px 11px;
        }
        .template_lxj_8 {
          width: 104px;
          height: 146px;
          margin: 12px 0 10px 11px;
        }
        .template_lxj_9 {
          width: 150px;
          height: 104px;
          margin: 8px auto 12px;
        }
        .template_lxj_10 {
          width: 150px;
          height: 104px;
          margin: 8px auto 12px;
        }
        .template_lxj_11{
          width: 95px;
          height: 124px;
          margin-top: 10px;
          margin-right: 8px;
          margin-bottom: 34px;
        }
        .template_lxj_12{
          width: 95px;
          height: 124px;
          margin-top: 10px;
          margin-left: 8px;
          margin-bottom: 34px;
        }
        .template_lxj_13 {
          width: 95px;
          height: 95px;
          margin: 38px auto 14px;
          border-radius: 5px;
        }
        .template_lxj_14 {
          width: 100px;
          height: 100px;
          border-radius: 5px;
          margin: 34px auto;
        }
        .template_lxj_15 {
          width: 99px;
          height: 144px;
          margin: 4px auto;
        }
        .template_lxj_16 {
          width: 148px;
          height: 140px;
          margin: 4px auto;
        }
        .template_lxj_17{
          width: 148px;
          height: 140px;
          margin: 4px auto;
        }
        .template_lxj_18{
          width: 150px;
          height: 126px;
          margin: 21px auto;
          .div_page {
            width: 73px;
            height: 126px;
          }
        }
        .template_lxj_19{
          width: 54px;
          height: 148px;
          margin-top: 8px;
          margin-left: 24px;
          margin-bottom: 12px;
          .div_page {
            width: 54px;
            height: 70px;
            &:nth-child(2){
              margin-top: 8px;
            }
          }
        }
        .template_lxj_20{
          width: 104px;
          height: 106px;
          margin: 31px auto;
          .div_page {
            width: 50px;
            height: 50px;
            &:nth-child(2){
              margin-left: 4px;
            }
            &:nth-child(3){
              margin-top: 4px;
            }
            &:nth-child(4){
              margin-top: 4px;
            }
          }
        }
        .template_lxj_21{
          width: 150px;
          height: 130px;
          margin: 8px auto;
          .div_page {
            width: 48px;
            height: 64px;
            &:nth-child(2){
              margin: 0 2px;
            }
            &:nth-child(4){
              margin-top:2px;
            }
            &:nth-child(6){
              margin-top:2px;float: left;
            }
            &:nth-child(5){
              margin: 0 2px;
              margin-top:2px;
            }
            //&:nth-child(3){
            //  margin-top: 4px;
            //}
            //&:nth-child(4){
            //  margin-top: 4px;
            //}
          }
        }
      }
    }
  }
}
//画册342mmX342mm
#product {
  .hc_342X342 {
    .titlePage_bg {
      width: 324px;
      height: 162px;
    }
    .time_bg {
      width: 324px;
      height: 192px;
      position: relative;
      .firstPage {
        background: #1d1c19;
        height: 162px;
        .page_bg {
          height: 162px;
        }
      }
      .lastPage {
        background: #efefef;
        height: 162px;
        .page_bg {
          height: 162px;
        }
      }
      .pubilc_div {
        height: 192px;
      }
      .time_pu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        border-left: 1px solid #efefef;

        //如果有页脚和封底的时候
        .page_b {
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 99;
          text-align: center;
          background: #efefef;
        }
        .title_strong {
          display: block;
          text-align: center;
          line-height: 20px;
          color: #8b682a;

        }
        .title_strong2 {
          display: block;
          text-align: center;
          font-weight: 400;
          font-size: 13px;
          color: #adadad;
          line-height: 16px;
        }
        //旅行记尾部
        .template_lxj_100 {
          width: 58px;
          height: 58px;
          margin: 55px auto;
        }
        .template_lxj_0 { //首页
          width: 136px;
          height: 84px;
          margin: 0 auto;
          margin-top: 26px;
          margin-bottom: 18px;
        }
        .template_lxj_1 {
          width: 162px;
          height: 192px;
          .mainTitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 100px;
            margin-right: 12px;
            margin-top: 50px;
            text-align: right;
          }
          .box_text {
            width: 80px;
            height: 12px;
            margin-top: 14px;
            margin-bottom: 74px;
            margin-right: 12px;
            line-height: 12px;
            text-align: right;
          }
        }
        .template_lxj_2 {
          width: 134px;
          height: 134px;
          margin: 14px auto;
        }
        .template_lxj_3 {
          width: 126px;
          height: 148px;
          margin: 7px auto;
          margin-left: 11px;

        }
        .template_lxj_4 {
          width: 126px;
          height: 148px;
          margin: 7px auto;
          margin-right: 11px;
        }
        .template_lxj_5 {
          width: 98.35px;
          height: 148px;
          margin: 7px auto;
          margin-left: 11px;
        }
        .template_lxj_6 {
          width: 98.35px;
          height: 148px;
          margin: 7px auto;
          margin-right: 11px;
        }
        .template_lxj_7 {
          width: 162px;
          height: 108px;
          margin: 27px auto;
        }
        .page_8 {
          margin-top: 0;
          //padding-top: 4px;
        }
        .template_lxj_8 {
          width: 162px;
          height: 162px;
          margin: 0px auto;

        }
        .template_lxj_9 {
          width: 241px;
          height: 162px;
          margin: 0px auto;
          margin-left: 0px;
        }
        .template_lxj_10 {
          width: 100%;
          height: 108px;
          margin: 27px auto;
          //margin-left: 0px;
        }
        .template_lxj_100 {
          width: 108px;
          height: 72px;
          margin: 0px auto;
          margin-top: 24px;
        }
        .login_footer {
          width: 92px;
          height: 30px;
          background: url("../../assets/img/title_logo.png") no-repeat;
          background-size: 100%;
          margin-left: 42px;
          margin-top: 24px;
          margin-bottom: 12px;
        }
      }
    }
  }
}

//画册342X250mm
#product {
  .hc_342X250 { //旅行记
    .titlePage_bg {
      width: 324px;
      height: 120px;
    }
    .time_bg {
      width: 324px;
      height: 156px;
      position: relative;
      .firstPage {
        background: #1d1c19;
        height: 162px;
        .page_bg {
          height: 120px;
        }
        .footer_page {
          height: 36px;
        }
      }
      .lastPage {
        background: #efefef;
        height: 120px;
        .page_bg {
          height: 120px;
        }
        .footer_page {
          height: 36px;
        }
      }
      .pubilc_div {
        height: 156px;
      }
      .time_pu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        border-left: 1px solid #efefef;

        //如果有页脚和封底的时候
        .page_b {
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 99;
          text-align: center;
          background: #efefef;
        }
        .title_strong {
          display: block;
          text-align: center;
          line-height: 20px;
          color: #8b682a;
        }

        .title_strong2 {
          display: block;
          text-align: center;
          font-weight: 400;
          font-size: 13px;
          color: #adadad;
          line-height: 16px;
        }
        //旅行记尾部
        .template_lxj_100 {
          width: 58px;
          height: 58px;
          margin: 55px auto;
        }

        .template_lxj_0 { //首页
          width: 136px;
          height: 84px;
          margin: 0 auto;
          margin-top: 26px;
          margin-bottom: 18px;
        }
        .page {
          height: 36px;
        }
        .template_lxj_1 {
          width: 162px;
          height: 162px;
          .mainTitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 100px;
            margin-right: 12px;
            margin-top: 50px;
            text-align: right;
          }
          .box_text {
            width: 80px;
            height: 12px;
            margin-top: 14px;
            margin-bottom: 32px;
            margin-right: 12px;
            line-height: 12px;
            text-align: right;
          }
        }
        .template_lxj_2 {
          .mainTitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 100px;
            margin-left: 32px;
            margin-top: 20px;
            margin-bottom: 0;
          }
          .subtitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 80px;
            margin-left: 32px;
            margin-top: 6px;
            margin-bottom: 6px;
          }
          .box_text {
            width: 100px;
            line-height: 12px;
            margin: 0;
            margin-left: 32px;
            height: 52px;
            margin-bottom: 12px;
          }
        }
        .template_lxj_3 {
          width: 98px;
          height: 98px;
          margin: 11px 0 11px 13px;

        }
        .template_lxj_4 {
          width: 98px;
          height: 98px;
          margin: 11px auto;
          margin-right: 13px;
        }
        .template_lxj_5 {
          width: 146px;
          height: 108px;
          margin: 6px auto;
          .div_page {
            width: 70.8px;
            height: 108px;
          }
        }
        //.template_lxj_6 {
        //  width: 148px;
        //  height: 104px;
        //  margin: 8px auto;
        //  .div_page {
        //    width: 70px;
        //    height: 104px;
        //    .div_lxj {
        //      height: 48px;
        //      background: #d2d2d2;
        //      position: relative;
        //      overflow: hidden;
        //    }
        //    .div_lxj:nth-child(2) {
        //      margin-top: 8px;
        //    }
        //  }
        //  .div_page:nth-child(1) {
        //    width: 70px;
        //  }
        //  .div_page:nth-child(2) {
        //    background: #fff;
        //  }
        //}
        .template_lxj_6 {
          width: 154px;
          height: 104px;
          margin: 8px auto;
          position: relative;
          background: #fff;
          .img_page_1{
            width: 77px;
            height: 104px;background-color: #d2d2d2;
          }
          .img_page_2{
            width: 70px;
            height: 48px;
            position: absolute;
            right: 0;
            top:0px;background-color: #d2d2d2;
          }
          .img_page_3{
            width: 70px;
            height: 48px;
            position: absolute;
            right: 0;
            top:56px;    background-color: #d2d2d2;
          }
        }
        .template_lxj_7 {
          width: 154px;
          height: 104px;
          margin: 8px auto;
          position: relative;
          background: #fff;
          .img_page_1{
            width: 77px;
            height: 104px;background-color: #d2d2d2;
            float: right;
          }
          .img_page_2{
            width: 70px;
            height: 48px;
            position: absolute;
            left: 0;
            top:0px;background-color: #d2d2d2;
          }
          .img_page_3{
            width: 70px;
            height: 48px;
            position: absolute;
            left: 0;
            top:56px;    background-color: #d2d2d2;
          }
        }
        .template_lxj_8 {
          width: 120px;
          height: 120px;
          margin: 0;
          margin-left: 0;
        }
        .template_lxj_9 {
          width: 100%;
          height: 120px;
          margin: 0;
        }
        .template_lxj_10 {
          width: 152px;
          height: 108px;
          margin: 6px auto;
        }
        .template_lxj_11 {
          width: 120px;
          height: 120px;
          margin: 0;
          margin-left: 41px;
        }
        .page_8 {
          margin-top: 0;
        }
        .login_footer { //页脚logo图
          width: 70px;
          height: 20px;
          margin-left: 80px;
          background: url("../../assets/img/title_logo.png") no-repeat;
          background-size: 100%;
        }
        .template_lxj_100 {
          width: 135px;
          height: 90px;
          margin: 0 auto;
          margin-top: 6px;

        }

      }
    }
  }
}

//hc_250X342 画册250X342
#product {
  .hc_250X342 { //旅行记
    .titlePage_bg {
      width: 324px;
      height: 220px;
    }
    .time_bg {
      width: 324px;
      height: 250px;
      position: relative;
      .firstPage {
        background: #1d1c19;
        height: 220px;
        .page_bg {
          height: 220px;
        }
      }
      .lastPage {
        background: #efefef;
        height: 220px;
        .page_bg {
          height: 220px;
        }
      }
      .pubilc_div {
        height: 250px;
      }
      .time_pu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        border-left: 1px solid #efefef;

        //如果有页脚和封底的时候
        .page_b {
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 99;
          text-align: center;
          background: #efefef;
        }
        .title_strong {
          display: block;
          text-align: center;
          line-height: 20px;
          color: #8b682a;

        }
        .title_strong2 {
          display: block;
          text-align: center;
          font-weight: 400;
          font-size: 13px;
          color: #adadad;
          line-height: 16px;
        }
        //旅行记尾部
        .template_lxj_100 {
          width: 58px;
          height: 58px;
          margin: 55px auto;
        }
        .page_8 {
          margin-top: 0;
        }
        .template_lxj_0 { //首页
          width: 136px;
          height: 84px;
          margin: 0 auto;
          margin-top: 26px;
          margin-bottom: 18px;
        }
        .template_lxj_1 {
          width: 162px;
          height: 250px;
          .mainTitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 100px;
            margin-right: 12px;
            margin-top: 50px;
            text-align: right;
          }
          .box_text {
            width: 80px;
            height: 12px;
            margin-top: 14px;
            margin-bottom: 132px;
            margin-right: 12px;
            line-height: 12px;
            text-align: right;
          }
        }
        .template_lxj_2 {
          width: 146px;
          height: 146px;
          margin: 37px auto;
        }
        .template_lxj_3 {
          width: 146px;
          height: 182px;
          margin: 19px auto;
        }
        .template_lxj_4 {
          width: 152px;
          height: 148px;
          margin: 36px auto;
        }
        .template_lxj_5 {
          width: 162px;
          height: 131px;
          margin: 45px auto;
        }
        .template_lxj_6 {
          width: 162px;
          height: 220px;
          margin: 0 auto;
        }
        .template_lxj_7 {
          width: 140px;
          height: 92px;
          margin: 30px auto;
          .div_page {
            width: 66px;
            height: 92px;
            .div_lxj {
              height: 44px;
              background: #d2d2d2;
              position: relative;
              overflow: hidden;
            }
            .div_lxj:nth-child(2) {
              margin-top: 4px;
            }
          }
          .div_page:nth-child(1) {
            width: 70px;
          }
          .div_page:nth-child(2) {
            background: #fff;
          }
        }
        .template_lxj_9 {
          width: 278px;
          height: 220px;
          margin: 0 auto;
          margin-left: 0;
        }
        .template_lxj_100 {
          width: 142px;
          height: 142px;
          margin: 0 auto;
          margin-top: 27px;
        }
        .login_footer {
          width: 92px;
          height: 30px;
          background: url("../../assets/img/title_logo.png") no-repeat;
          background-size: 100%;
          margin-left: 60px;
          margin-top: 17px;
        }
      }
    }
  }
}

//hc_342X500  画册342X500
#product {
  .hc_342X500 { //画册342X500
    .titlePage_bg {
      width: 324px;
      height: 237px;
    }
    .time_bg {
      width: 324px;
      height: 260px;
      position: relative;
      .firstPage {
        background: #1d1c19;
        height: 237px;
        .page_bg {
          height: 237px;
        }
      }
      .lastPage {
        background: #efefef;
        height: 237px;
        .page_bg {
          height: 237px;
        }
      }
      .pubilc_div {
        height: 260px;
      }
      .time_pu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        border-left: 1px solid #efefef;

        //如果有页脚和封底的时候
        .page_b {
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 99;
          text-align: center;
          background: #efefef;
        }
        .title_strong {
          display: block;
          text-align: center;
          line-height: 20px;
          color: #8b682a;

        }
        .title_strong2 {
          display: block;
          text-align: center;
          font-weight: 400;
          font-size: 13px;
          color: #adadad;
          line-height: 16px;
        }
        //旅行记尾部
        .template_lxj_100 {
          width: 58px;
          height: 58px;
          margin: 55px auto;
        }
        .page_8 {
          margin-top: 0;
        }
        .template_lxj_0 { //首页
          width: 136px;
          height: 84px;
          margin: 0 auto;
          margin-top: 26px;
          margin-bottom: 18px;
        }
        .template_lxj_1 {
          width: 162px;
          height: 260px;
          .mainTitle {
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            width: 100px;
            text-align: center;
            margin: 17px auto 8px;
          }
          .box_text {
            width: 80px;
            height: 14px;
            line-height: 14px;
            margin: 0 auto;text-align: center;
          }
          .box_text3 {
            width: 112px;
            height: 12px;
            line-height: 12px;
            margin: 10px auto 0;
            box-shadow: #888888 2px 2px 2px;
            background: #e9e9e9;text-align: center;
          }
          .box_text4 {
            width: 70px;
            height: 12px;
            line-height: 12px;
            margin: 10px auto 0;
            box-shadow: #888888 2px 2px 2px;
            background: #e9e9e9;text-align: center;
          }
          .box_text5 {
            width: 50px;
            height: 12px;
            line-height: 12px;
            margin: 10px auto 0;
            box-shadow: #888888 2px 2px 2px;
            background: #e9e9e9;text-align: center;
          }
          .box_text6 {
            width: 40px;
            height: 12px;
            line-height: 12px;
            margin: 10px auto 90px;
            box-shadow: #888888 2px 2px 2px;
            background: #e9e9e9;text-align: center;
          }
        }
        .template_lxj_2 {
          width: 100%;
          height: 260px;
          margin: 0px auto;
          .mainTitle {
            width: 140px;
            height: 20px;
            line-height: 20px;
            margin: 20px auto 24px;
            text-align: center;
            font-size: 16px;
          }
          .box_text {
            height: 114px;
            margin-bottom: 59px;
          }
          .text_left, .text_right {
            width: 62px;
            height: 114px;

          }
        }
        .template_lxj_3 {

          .mainTitle {
            width: 76px;
            height: 12px;
            line-height: 12px;
            margin: 110px 0 111px 18px;
          }
        }
        .text {
          margin-bottom: 20px;
        }
        .template_lxj_4 {
          width: 130px;
          height: 130px;
          margin: 47px auto 28px;

        }
        .template_lxj_5 {
          width: 130px;
          height: 89px;
          margin: 44px auto 72px;
        }
        .template_lxj_6 {
          width: 128px;
          height: 190px;
          margin: 5px auto 10px;
        }
        .template_lxj_7 {
          width: 122px;
          height: 180px;
          margin: 29px auto 28px;
        }
        .page_8 {
          margin-top: 0;
        }
        .template_lxj_8 {
          width: 162px;
          height: 237px;
          margin: 0 auto;
        }

        .template_lxj_9 {
          width: 289px;
          height: 207px;
          position: relative;
          margin: 15px auto;
          .div_page {
            width: 207px;
            float: right;
          }
          .mainTitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 75px;
            text-align: center;
            margin: 100px auto 8px;
            box-shadow: #888888 2px 2px 2px;
            background: #e9e9e9;
            border: 1px solid #d2d2d2;
            box-sizing: border-box;
            float: left;
            overflow: hidden;
          }
        }
        .template_lxj_10 {
          width: 289px;
          height: 220px;
          position: relative;
          margin: 8px auto;
          .div_page {
            width: 235.84px;
            height: 198px;
            float: right;
            overflow: hidden;
          }
          .mainTitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 128px;
            margin-top: 206px;
            margin-left: 160px;
            box-shadow: #888888 2px 2px 2px;
            background: #e9e9e9;
            border: 1px solid #d2d2d2;
            box-sizing: border-box;
          }
        }
        .template_lxj_11 {
          width: 289px;
          height: 216px;
          position: relative;
          margin: 10px auto;
          .div_page {
            width: 289px;
            height: 178px;
            margin-top: 8px;
            overflow: hidden;
          }
          .mainTitle {
            height: 12px;
            line-height: 12px;
            font-size: 12px;
            width: 128px;
            margin-top: 16px;
            margin-left: 160px;
            box-shadow: #888888 2px 2px 2px;
            background: #e9e9e9;
            border: 1px solid #d2d2d2;
            box-sizing: border-box;
          }
        }
        .template_lxj_12 {
          width: 324px;
          height: 237px;
          position: relative;
          margin: 0px auto;
        }
        .template_lxj_100 {
          width: 130px;
          height: 130px;
          margin: 0 auto;
          margin-top: 41px;
        }
        .mainTitle_footer {
          height: 12px;
          line-height: 12px;
          font-size: 12px;
          width: 78px;
          margin: 16px auto 8px;
          box-shadow: #888888 2px 2px 2px;
          background: #e9e9e9;
          border: 1px solid #d2d2d2;
          box-sizing: border-box;
          overflow: hidden;
        }
        .login_footer {
          width: 92px;
          height: 30px;
          background: url("../../assets/img/title_logo.png") no-repeat;
          background-size: 100%;
          margin-left: 55px;
          margin-top: 6px;
        }
      }
    }
  }
}

//时光集
#product {
  .shiguangji_one {
    .titlePage_bg {
      height: 223px;
      width: 320px;
    }
    .time_bg {
      width: 324px;
      height: 252px;
      position: relative;
      .firstPage {
        background: #1d1c19;
        height: 223px;
        .page_bg {
          height: 223px;
        }
      }
      .lastPage {
        background: #efefef;
        height: 223px;
        .page_bg {
          height: 223px;
        }
      }
      .pubilc_div {
        height: 252px;
      }
      .pubilc_div:nth-of-type(2n+2) {
        border-left: 1px solid #efefef;
      }
    }
    .text {
      width: 142px;
    }
    //  时光集样式
    .template_lxj_1 {
      .mainTitle {
        height: 12px;
        line-height: 12px;
        font-size: 12px;
        margin: 82px 0 15px 40px;
        width: 110px;overflow: hidden;
      }
      .box_text {
        margin: 0px 0 78px 40px;
        height: 36px;
        line-height: 12px;
        font-size: 12px;
        width: 110px;
        overflow: hidden;
      }
    }
    .template_lxj_2 {
      width: 142px;
      height: 197px;
      margin: 5px auto;
    }
    .template_lxj_3 {
      width: 142px;
      height: 197px;
      margin: 5px auto 5px;
      .div_page {
        height: 96px;
      }
    }
    .template_lxj_4 {
      width: 142px;
      height: 142px;
      margin: 33px auto 32px;
    }
    .template_lxj_5 {
      width: 142px;
      height: 95px;
      margin: 67px auto 45px;
    }
  }
}

//家书样式
#product {
  .jiashu_one {
    .hengban_bbs{
      .page_b{
        width: 100% !important;
      }
    }
    .titlePage_bg {
      display: none;
    }
    .page{
      .pageleft{
        position: relative;
        .page_b{
          position: absolute;
          width: 200%;
          height: 100%;
          z-index: 2;
          text-align: center;
          left: 0;
          top:0;
          display: block;
          background:#efefef;
        }
      }
    }
    //模版文本框样式
    .jiashu_text_1{
      width: 82px;
      text-align: center;
      margin-bottom: 16px;
    }
    .jiashu_text_2{
      width: 85px;
      text-align: center;
      margin-bottom: 16px;
    }
    .jiashu_text_3{
      width: 92px;
      text-align: center;
      margin-bottom: 16px;
    }
    .jiashu_text_4{
      width: 66px;
      text-align: center;
      margin-bottom: 16px;
    }
    .jiashu_text_5{
      margin: 57px auto 0;
      width: 101px;
      text-align: center;
      margin-bottom: 16px;
    }
    .jiashu_text_6{
      margin: 49px auto 0;
      width: 58px;
      text-align: center;
      margin-bottom: 16px;
    }
    .jiashu_text_7{
      width: 114px;
      text-align: center;
      margin-bottom: 16px;
    }
    .jiashu_text_8{
      width: 114px;
      text-align: center;
      margin-bottom: 16px;
      margin-top: 17px;
    }
    .jiashu_text_9{
      width: 96px;
      text-align: center;
      margin-bottom: 24px;
      height: 32px;
    }
    .jiashu_text_10{
      width: 96px;
      text-align: center;
      margin-bottom: 33px;
    }
    .jiashu_text_11{
      width: 68px;
      text-align: center;
      margin-bottom: 16px;
    }
    .jiashu_text_11_11{
      width: 68px;
      position: absolute;
      top: 80px;
      left: 47px;text-align: center;
    }
    .jiashu_text_12{
      width: 90px;
      margin-left: 196px;
      height: 12px;
      line-height: 12px;
      margin-bottom: 16px;
      margin-top: 8px;
      font-size: 12px;
      overflow: hidden;
      border: 1px solid #d2d2d2;
      box-sizing: border-box;
      text-align: center;
    }
    .jiashu_text_13{
      width: 90px;
      margin-left: 129px;
      height: 12px;
      line-height: 12px;
      margin-bottom: 16px;
      margin-top: 10px;
      text-align: center;
      font-size: 12px;
      overflow: hidden;
      border: 1px solid #d2d2d2;
      box-sizing: border-box;
    }
    .jiashu_text_14{
      width: 50px;
      height: 86px;
      line-height: 12px;
      font-size: 12px;
      overflow: hidden;
      border: 1px solid #d2d2d2;
      box-sizing: border-box;
      position: absolute;
      right: 0;
      top:0;
    }
    .jiashu_text_15{
      width: 85px;
      height: 129px;
      margin: 47px auto;
    }
    .jiashu_text_16{
      width: 85px;
      height: 129px;
      margin: 47px auto;
      pointer-events: none;
      border: none;
    }
    .time_one{
      .pubilc_div{
        background: url("http://image2.artup.com/static/pc/jiashu/shuhe_bg2.png") no-repeat;
        background-size: 100%;
      }
      .page{
        margin-top: 92px;
      }
      .lastPage {
        background: #efefef !important;
      }
    }
    .time_two{

      .pubilc_div:nth-child(1){
        background: url("http://image2.artup.com/static/pc/jiashu/fiarst_page_right.jpg") no-repeat;
        background-size: 100%;
      }
      strong{
        display: block;
        text-align: center;
        font-size: 20px;
        color: #a89a90;
        line-height: 30px;
        margin-bottom: 24px;
      }
    }
    .time_bg {
      width: 324px;
      height: 252px;
      position: relative;
      .firstPage {
        background: url("http://image2.artup.com/static/pc/jiashu/fiarst_page_left.jpg") no-repeat;
        background-size: 100%;
        height: 223px;
        .page_bg {
          height: 223px;
        }
      }
      .lastPage {
        background: url("http://image2.artup.com/static/pc/jiashu/fiarst_page_right.jpg") no-repeat;
        background-size: 100%;
        height: 223px;
        .page_bg {
          height: 223px;
        }
      }
      .pubilc_div {
        height: 252px;
      }
      .pubilc_div:nth-of-type(2n+2) {
        border-left: 1px solid #efefef;
      }
    }
    .text{
      //margin-bottom: 16px;
    }
    .template_lxj_0 { //家书封面
      width: 77px;
      height: 106px;
      margin: 34px auto 29px;
    }
    .template_lxj_200 { //家书书盒
      margin: 42px auto 29px;
      background: url("http://image2.artup.com/static/pc/jiashu/page_first_24.png") no-repeat #d2d2d2;
      background-size: 100% 100%;
    }
    .title_text_1{
      text-align: center;
      font-size: 20px;
      color: #a89a90;
      line-height: 30px;
      margin-bottom: 24px;
      width: 100%;
      border: none;
      height: 30px;
      font-weight: bold;
    }
    .template_lxj_1 {
      width: 85px;
      height: 129px;
      margin: 42px auto 24px;
    }
    .template_lxj_2 {
      width: 82px;
      height: 82px;
      margin: 58px auto 55px;
    }
    .template_lxj_3 {
      //width: 142px;
      height: 166px;
      margin: 20px auto 9px;
      .div_page {
        width: 92px;
        height: 68px;
        margin: 14px auto 0;
      }
    }
    .template_lxj_4 {
      height: 179px;
      .div_page {
        width: 66px;
        height: 66px;
        margin: 22px auto 0;
      }
    }
    .template_lxj_5 {
      width: 101px;
      height: 81px;
      margin: 57px auto 48px;
    }
    .template_lxj_6 {
      width: 58px;
      height: 71px;
      margin: 75px auto 48px;
    }
    .template_lxj_7 {
      width: 114px;
      height: 155px;
      margin: 28px auto 12px;
    }
    .template_lxj_8{
      width: 114px;
      height: 126px;
      margin: 52px auto 0;
      .div_page {
        width: 52px;
        height: 52px;
        margin-left: 10px;
        margin-bottom: 10px;

        &:nth-child(2n+1){
          margin-left: 0;
        }
      }
    }
    .template_lxj_9 {
      width: 95px;
      height: 70px;
      margin: 57px auto 40px;
    }
    .template_lxj_10{
      width: 88px;
      height: 126px;
      margin: 52px auto 0;
      .div_page {
        width: 38px;
        height: 57px;
        margin-left: 10px;
        margin-bottom: 10px;
        &:nth-child(2n+1){
          margin-left: 0;
        }
      }
    }
    .template_lxj_11 {
      //width: 142px;
      height: 166px;
      margin: 20px auto 9px;
      .div_page {
        width: 68px;
        height: 68px;
        margin: 0 auto;
        &:nth-child(2){
          margin: 34px auto 0;
        }
      }
    }
    .template_lxj_12{
      width: 288px;
      height: 213px;
      margin: 5px auto 5px;
      .div_page{
        width: 288px;
        height: 190px;
      }
    }
    .template_lxj_13{
      width: 226px;
      height: 190px;
      margin: 27px auto 5px;
      .div_page{
        width: 219px;
        height: 157px;
      }
    }
    .template_lxj_14{
      width: 256px;
      height: 170px;
      margin: 47px auto 5px;
      .div_page{
        width: 182px;
        height: 136px;
      }
    }
  }
}
//挂历
//#guali {
//  .guali_hengban{
//    .guali_img{
//      width: 100%;
//      height: 34px;
//      background: #fff;
//    }
//
//  }
//}

//
//.span_40{
//  position: absolute;
//  word-break: break-all;
//  word-wrap: break-word;
//  //font-family: 方正兰亭中黑;
//  line-height: 2;
//  transform-origin: left top 0px;
//  font-size: 12px;
//  transform: scale(0.287963);
//  width: 128px;
//  left: 0px;
//  top: 0px;
//}
//poster
//图标不合格
.Unqualified{
  color: #af454b;
  font-size: 25px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  display: none;
  &:hover{
    &:after{
      opacity: 1;
    }
  }
  &:after{
    content: '像素不够';
    font-size: 12px;
    color: red;
    width: 50px;
    position: absolute;
    left: -21px;
    top: -13px;
    transform: scale(.8);
    height: 40px;
    opacity: 0;
    z-index: 999;
  }
}
